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

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

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

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

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

App.js

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

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

اسکرول ویو فهرستی از نام ها را ارائه می دهد. ما آن را در 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'
   }
})

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

 

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

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

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

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

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

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

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

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

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>

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>

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);

 

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

  1. React Native یا ریکت نیتیو چیست؟
  2. آموزش React Native – نصب و تنظیم محیط React Native
  3. آموزش App در React Native
  4. آموزش کار با State در React Native
  5. آموزش کار با کامپوننت Props در React Native
  6. آموزش استایل دهی در برنامه نویسی React Native
  7. آموزش flex در برنامه نویسی react native
  8. آموزش لیست ویو در برنامه نویسی React Native
  9. آموزش کار با TextInput در برنامه نویسی ریکت نیتیو
5/5 - (1 امتیاز)

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

پک طلایی طراحی وب
  • انتشار: ۴ مرداد ۱۳۹۹

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.