در خدمت شما هستیم با آموزش 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
- React Native یا ریکت نیتیو چیست؟
- آموزش React Native – نصب و تنظیم محیط React Native
- آموزش App در React Native
- آموزش کار با State در React Native
- آموزش کار با کامپوننت Props در React Native
- آموزش استایل دهی در برنامه نویسی React Native
- آموزش flex در برنامه نویسی react native
- آموزش لیست ویو در برنامه نویسی React Native
- آموزش کار با TextInput در برنامه نویسی ریکت نیتیو
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۴ مرداد ۱۳۹۹
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس