آموزش ScrollView در برنامه نویسی ریکت نیتیو

0 دیدگاه

در خدمت شما هستیم با آموزش ScrollView در برنامه نویسی ریکت نیتیو از وب سایت آموزش برنامه نویسی سورس باران.

آموزش ScrollView در ریکت نیتیو

در این فصل ما به شما نحوه کار با عنصر ScrollView را نشان خواهیم داد. ما دوباره ScrollView Example.js را ایجاد خواهیم کرد و آن را در Home وارد می کنیم.

App.js

import React from 'react';
import ScrollViewExample from './scroll_view.js';

const App = () => {
   return (
      <ScrollViewExample />
   )
}

import React from 'react';

import ScrollViewExample from './scroll_view.js';

const App = () => {

return (

)

}

اسکرول ویو فهرستی از نام ها را ارائه می دهد. ما آن را در state ایجاد خواهیم کرد.

ScrollView.js

import React, { Component } from 'react';
import { Text, Image, View, StyleSheet, ScrollView } from 'react-native';

class ScrollViewExample extends Component {
   state = {
      names: [
         {'name': 'Ben', 'id': 1},
         {'name': 'Susan', 'id': 2},
         {'name': 'Robert', 'id': 3},
         {'name': 'Mary', 'id': 4},
         {'name': 'Daniel', 'id': 5},
         {'name': 'Laura', 'id': 6},
         {'name': 'John', 'id': 7},
         {'name': 'Debra', 'id': 8},
         {'name': 'Aron', 'id': 9},
         {'name': 'Ann', 'id': 10},
         {'name': 'Steve', 'id': 11},
         {'name': 'Olivia', 'id': 12}
      ]
   }
   render() {
      return (
         <View>
            <ScrollView>
               {
                  this.state.names.map((item, index) => (
                     <View key = {item.id} style = {styles.item}>
                        <Text>{item.name}</Text>
                     </View>
                  ))
               }
            </ScrollView>
         </View>
      )
   }
}
export default ScrollViewExample

const styles = StyleSheet.create ({
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      margin: 2,
      borderColor: '#2a4944',
      borderWidth: 1,
      backgroundColor: '#d2f7f1'
   }
})

import React, { Component } from 'react';

import { Text, Image, View, StyleSheet, ScrollView } from 'react-native';

class ScrollViewExample extends Component {

state = {

names: [

{'name': 'Ben', 'id': 1},

{'name': 'Susan', 'id': 2},

{'name': 'Robert', 'id': 3},

{'name': 'Mary', 'id': 4},

{'name': 'Daniel', 'id': 5},

{'name': 'Laura', 'id': 6},

{'name': 'John', 'id': 7},

{'name': 'Debra', 'id': 8},

{'name': 'Aron', 'id': 9},

{'name': 'Ann', 'id': 10},

{'name': 'Steve', 'id': 11},

{'name': 'Olivia', 'id': 12}

]

}

render() {

return (

<View>

{

this.state.names.map((item, index) => (

</View>

))

}

</ScrollView>

</View>

)

}

export default ScrollViewExample

const styles = StyleSheet.create ({

item: {

flexDirection: 'row',

justifyContent: 'space-between',

alignItems: 'center',

padding: 30,

margin: 2,

borderColor: '#2a4944',

borderWidth: 1,

backgroundColor: '#d2f7f1'

}

})

هنگامی که ما برنامه را اجرا می کنیم، لیست scrollable از نام ها را خواهیم دید.

آموزش ScrollView عمودی در ریکت نیتیو

1 – یک پروژه جدید ایجاد کنید و در بلاک import موارد AppRegistry, StyleSheet, ScrollView, Text, Image, View رو اضافه کنید

import { AppRegistry, StyleSheet, ScrollView, Text, Image, View } from 'react-native';

1	import { AppRegistry, StyleSheet, ScrollView, Text, Image, View } from 'react-native';

2 – ScrollView در بلاک render return اضافه کنید

render() {
    return (
 
<ScrollView>
 
  
 
</ScrollView>
 
            
    );
  }

render() {

return (

</ScrollView>

);

}

3 – View درون ScrollView اضافه کنید

render() {
    return (
 
<ScrollView>
 
  
 
</ScrollView>
 
            
    );
  }

render() {

return (

</ScrollView>

);

}

4 – در بالای کد AppRegistry.registerComponent یک StyleSheet ایجاد کنید

const styles = StyleSheet.create({
 
MainContainer: 
{
 
flex: 1,
 
// Set content's horizontal alignment.
alignItems: 'center',
 
backgroundColor: '#FFF8E1',
 
}
});

const styles = StyleSheet.create({

MainContainer:

{

flex: 1,

// Set content's horizontal alignment.

alignItems: 'center',

backgroundColor: '#FFF8E1',

}

});

5 – استایل MainContainer به View اضافه کنید

<ScrollView>
 
  <View style={styles.MainContainer}>
 
    
 
  </View>
 
</ScrollView>

</View>

</ScrollView>

6 – دو کامپوننت Text و Image درون View اضافه کنید

<ScrollView>
 
  <View style={styles.MainContainer}>
 
    <Text style={{fontSize:50, textAlign: 'center'}} >Scroll Me To See The Effect</Text>
 
    <Image source={require('./images/sample_image.png')} />
 
    <Image source={require('./images/sample_image_new.png')} />
 
    <Text style={{fontSize:50, textAlign: 'center'}} >Scroll View Ends Here.</Text>
 
  </View>
 
</ScrollView>

<Text style={{fontSize:50, textAlign: 'center'}} >Scroll Me To See The Effect</Text>

<Text style={{fontSize:50, textAlign: 'center'}} >Scroll View Ends Here.</Text>

</View>

</ScrollView>

7 – کد کامل برنامه در فایل index.js

import React, { Component } from 'react';
 
import { AppRegistry, StyleSheet, ScrollView, Text, Image, View } from 'react-native';
 
class Myproject extends Component {
 
  render() {
    return (
 
<ScrollView>
 
  <View style={styles.MainContainer}>
 
    <Text style={{fontSize:50, textAlign: 'center'}} >Scroll Me To See The Effect</Text>
 
    <Image source={require('./images/sample_image.png')} />
 
    <Image source={require('./images/sample_image_new.png')} />
 
    <Text style={{fontSize:50, textAlign: 'center'}} >Scroll View Ends Here.</Text>
 
  </View>
 
</ScrollView>
 
            
    );
  }
}
 
const styles = StyleSheet.create({
 
MainContainer: 
{
 
flex: 1,
 
// Set content's horizontal alignment.
alignItems: 'center',
 
backgroundColor: '#FFF8E1',
 
}
});
 
AppRegistry.registerComponent('Myproject', () => Myproject);

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, ScrollView, Text, Image, View } from 'react-native';

class Myproject extends Component {

render() {

return (

<Text style={{fontSize:50, textAlign: 'center'}} >Scroll Me To See The Effect</Text>

<Text style={{fontSize:50, textAlign: 'center'}} >Scroll View Ends Here.</Text>

</View>

</ScrollView>

);

}

const styles = StyleSheet.create({

MainContainer:

{

flex: 1,

// Set content's horizontal alignment.

alignItems: 'center',

backgroundColor: '#FFF8E1',

}

});

AppRegistry.registerComponent('Myproject', () => Myproject);

لیست جلسات قبل آموزش React Native

React Native یا ریکت نیتیو چیست؟

آموزش React Native – نصب و تنظیم محیط React Native

آموزش App در React Native

آموزش کار با State در React Native

آموزش کار با کامپوننت Props در React Native

آموزش استایل دهی در برنامه نویسی React Native

آموزش flex در برنامه نویسی react native

آموزش لیست ویو در برنامه نویسی React Native

آموزش کار با TextInput در برنامه نویسی ریکت نیتیو

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

آموزش پروژه محور طراحی سایت با پایتون و جنگو مختص بازار کار