۲۹
فروردین

جلسه ۱۰ : کار با ScrollView در React Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. در جلسه قبل مبحث رو به چگونگی کار با TextInput در React Native رسوندیم و با آن آشنا شدیم . حال می خواهیم کار با ScrollView در React Native رو داشته باشیم تا هر چه بهتر و راحت تر بتوانیم با فریم ورک React Native کار کنیم. پس مبحث رو ادامه می دیم.

کار با ScrollView در React Native

در این فصل ما به شما نحوه کار با عنصر 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 در React Native

کلام پایانی

در این قسمت از آموزش فریم ورک React Native وارد مبحث چگونگی کار با ScrollView در React Native رو بررسی نمودیم و دیدیم که اسکرول ویو در راکت نیتیو چگونه لیستی از نام ها را ارایه می کند. در ادامه Images رو خواهیم داشت. مرسی از همراهیتون.

QR: جلسه ۱۰ : کار با ScrollView در React Native

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۰ : کار با ScrollView در React Native

مقدمه

کار با ScrollView در React Native

App.js

ScrollView.js

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ