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

4 سال پیش

امتیاز دهید post

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

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

ما دوباره ScrollViewExample.js را ایجاد کرده و در Home وارد می کنیم.

App.js

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

const App = () =&gt; {
   return (
      &lt;ScrollViewExample /&gt;
   )
}export default App

import React from 'react';

import ScrollViewExample from './scroll_view.js';

const App = () => {

return (

)

}export default App

Scrollview لیستی از نام ها را ارائه می دهد. ما آن را به صورت دولتی ایجاد خواهیم کرد.

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 (
         &lt;View&gt;
            &lt;ScrollView&gt;
               {
                  this.state.names.map((item, index) =&gt; (
                     &lt;View key = {item.id} style = {styles.item}&gt;
                        &lt;Text&gt;{item.name}&lt;/Text&gt;
                     &lt;/View&gt;
                  ))
               }
            &lt;/ScrollView&gt;
         &lt;/View&gt;
      )
   }
}
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'

}

})

وقتی برنامه را اجرا می کنیم، لیست پیمایشی نام ها را مشاهده خواهیم کرد

React Native ScrollView

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

امتیاز دهید post

نویسنده مطلب saber

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

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

App.js

ScrollView.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

بدون دیدگاه

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

App.js

ScrollView.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه