ScrollView عمودی در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری یک ScrollView عمودی در React Native ایجاد کنیم.ScrollView نوعی از کامپوننت است که خودش میتواند شامل کامپوننت های فرزندی مثل View, Button, Image و … باشد.توسعه دهندگان میتونند هر تعداد کامپوننتی که نیاز داند داخل ScrollView اضافه کنند تا بصورت خودکار عمودی در صفحه نمایش قرار گیرد.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)
2.اضافه کردن AppRegistry, StyleSheet, ScrollView, Text, Image, View در بلاک import
|
1 |
import { AppRegistry, StyleSheet, ScrollView, Text, Image, View } from 'react-native'; |
3.اضافه کردن ScrollView در بلاک render return
|
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { return ( <ScrollView> </ScrollView> ); } |
4.اضافه کردن View درون ScrollView
|
1 2 3 4 5 6 7 8 9 10 11 12 |
render() { return ( <ScrollView> </ScrollView> ); } |
5.ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, // Set content's horizontal alignment. alignItems: 'center', backgroundColor: '#FFF8E1', } }); |
6.اضافه کردن استایل MainContainer به View
|
1 2 3 4 5 6 7 8 9 |
<ScrollView> <View style={styles.MainContainer}> </View> </ScrollView> |
7.اضافه کردن دو کامپوننت Text و Image درون View
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
8.کد کامل برنامه در فایل index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
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); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
آموزش React Navigation 5
5 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام وقت بخیر
من تو برنامه ای نیاز داشتم که اسکرول ویو از انتها نمایش داده بشه که با این کد انجامش دادم
onContentSizeChange={() => this.scrollView.scrollToEnd({ animated: true })}
حالا نیاز دارم که وقتی به ابتدای لیست رفتم و button که برای دریافت اطلاعات بیشتر قرار داده شده رو زدم داده های جدید به ابتدای لیست اضافه بشن و اسکرول ویو هم جابجا نشه
من داده های جدید رو دریافت میکنم و به ابتدای لیست اضافه میکنم اما اسکرول ویو به انتهای لیست برگشت داده میشه
برای این مورد کسی هست راهنمایی کنه؟
از این کامپوننت
react-native-invertible-scroll-view
استفاده کردم مشکلم حل شد.
ممنون بابت اشتراک گزاری جواب
چه جالب و چقدر کدبهینه بود . تو as تقریبا چهار برابر این باید کد نوشت هم برای java ساید و هم xmlساید . خوشم اومدازش
یکی از ویژگی های اصلی react native همین ساختار کدهاش و بهینه بودنش هست،پیشنهاد میکنم برای درک performance react native مقاله مقایسه عملکرد react native و swift رو بخونی