RN學習之我的第一個RN小例子
阿新 • • 發佈：2019-02-19
最近用點空餘時間學習一下ReactNative，跟著教程做了一個小例子，做出的效果讓我很吃驚，真的“很原生”！！！真的要加緊學習了，不然Andrdoid開發就將要失業咯。
講講我是怎麼做這個小例子的。
1、先是搭建環境，步驟比較複雜，也會遇到很多坑，折騰兩天才搭建好環境也是正常的，所以學習這個還是不能急躁哇。
2、寫程式碼。對於我們Android來說，新手可以將程式碼寫在index.android.js 這個檔案裡。
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TextInput, ScrollView, Image, TouchableWithoutFeedback, TouchableOpacity, Alert, ToastAndroid, TouchableHighlight } from 'react-native'; /** * 獲取螢幕寬高 */ var Dimensions = require("Dimensions"); var {width,height} = Dimensions.get('window'); let pic = { //Map集合 key:value uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg' }; export default class Demo1 extends Component { //js constructor(props){ super(props); this.state = { //有點類似Map集合,這裡非要用state，state內部變數？ images :[ pic, require('./image/image1.jpg'), require('./image/image2.jpg'), require('./image/image3.jpg'), require('./image/image4.jpg'), require('./image/image5.jpg'), require('./image/image6.jpg') ], selectedImageIndex: 0, isNeedRun: true, }; this._index = 0;// 當前正在顯示的圖片 this._max = this.state.images.length;// 圖片總數 } //js裡面嵌入html，放在render裡面 render() { return ( <View style={styles.container}> {/*導航*/} <View style={styles.topView}> <Text style={styles.topTitile}> 天貓超市</Text> </View> {/*縱向的ScrollView*/} <ScrollView> <View style={styles.headerView}> <View> {/*橫向的ScrollView,淘寶輪播圖*/} <TouchableOpacity onPress={() =>this.onBannerPressed()} activeOpacity={0.9} > <ScrollView ref='scrollView' horizontal={true} showsHorizontalScrollIndicator={false} pagingEnabled={true} onMomentumScrollEnd={this.changeNumber.bind(this)} //大括號裡可以放js程式碼 > <Image source={this.state.images[0]} style={{width: width, height: 160 ,marginTop:10}}/> <Image source={this.state.images[1]} style={{width: width, height: 160 ,marginTop:10}}/> <Image source={this.state.images[2]} style={{width: width, height: 160 ,marginTop:10}}/> <Image source={this.state.images[3]} style={{width: width, height: 160 ,marginTop:10}}/> <Image source={this.state.images[4]} style={{width: width, height: 160 ,marginTop:10}}/> <Image source={this.state.images[5]} style={{width: width, height: 160 ,marginTop:10}}/> <Image source={this.state.images[6]} style={{width: width, height: 160 ,marginTop:10}}/> </ScrollView> </TouchableOpacity> <View style={styles.indicatorContainer}> <Text style={this.state.selectedImageIndex ==0?styles.active_indicator:styles.indicator}> •</Text> <Text style={this.state.selectedImageIndex ==1?styles.active_indicator:styles.indicator}> •</Text> <Text style={this.state.selectedImageIndex ==2?styles.active_indicator:styles.indicator}> •</Text> <Text style={this.state.selectedImageIndex ==3?styles.active_indicator:styles.indicator}> •</Text> <Text style={this.state.selectedImageIndex ==4?styles.active_indicator:styles.indicator}> •</Text> <Text style={this.state.selectedImageIndex ==5?styles.active_indicator:styles.indicator}> •</Text> <Text style={this.state.selectedImageIndex ==6?styles.active_indicator:styles.indicator}> •</Text> </View> </View> <TouchableWithoutFeedback onPress={() => this.onBannerPressed()}><Image source={pic} style={{width: width, height: 110 ,marginTop:10 }} /></TouchableWithoutFeedback> <TouchableWithoutFeedback onPress={() => this.onBannerPressed()}><Image source={require('./image/image1.jpg')} style={{width: width, height: 110 ,marginTop:10}} /></TouchableWithoutFeedback> <TouchableWithoutFeedback onPress={() => this.onBannerPressed()}><Image source={require('./image/image2.jpg')} style={{width: width, height: 110 ,marginTop:10}} /></TouchableWithoutFeedback> <TouchableWithoutFeedback onPress={() => this.onBannerPressed()}><Image source={require('./image/image3.jpg')} style={{width: width, height: 110 ,marginTop:10}} /></TouchableWithoutFeedback> <TouchableWithoutFeedback onPress={() => this.onBannerPressed()}><Image source={require('./image/image4.jpg')} style={{width: width, height: 110 ,marginTop:10}} /></TouchableWithoutFeedback> <TouchableWithoutFeedback onPress={() => this.onBannerPressed()}><Image source={require('./image/image5.jpg')} style={{width: width, height: 110 ,marginTop:10}} /></TouchableWithoutFeedback> <TouchableWithoutFeedback onPress={() => this.onBannerPressed()}><Image source={require('./image/image6.jpg')} style={{width: width, height: 110 ,marginTop:10}} /></TouchableWithoutFeedback> </View> {/*輸入框*/} <View style={styles.inputView}> <TextInput style={styles.textInputStyle} placeholder={"郵箱: "} /> <TextInput style={styles.textInputStyle} placeholder={"密碼: "} secureTextEntry={true} /> </View> {/*按鈕*/} <TouchableOpacity activeOpacity={0.8} onPress={() => this.loginClicked()}> <View style={styles.btnView}> <Text style={styles.btnText} onPress={() => this.loginClicked()}> 登 陸 </Text> </View> </TouchableOpacity> </ScrollView> </View> ); } //js //html裡呼叫loginClicked加括號就會出現奇怪的問題 loginClicked(){ //alert('我被點選了'); Alert.alert('溫馨提醒','確認登入？',[ {text:'取消',onPress:()=>ToastAndroid.show('你點選了取消~',ToastAndroid.SHORT)}, {text:'確定',onPress:()=>ToastAndroid.show('你點選了確定~',ToastAndroid.SHORT)}]); } //手動滑動 changeNumber(e){ var e = e.nativeEvent; console.log(e); var scrolledX = e.contentOffset.x; var scrolledImageIndex = Math.round(scrolledX/width); this.setState({ //state賦值,屬性預設有set方法。 selectedImageIndex: scrolledImageIndex }) //滑動對定時指示器的影響 this._index = scrolledImageIndex; } //程式載入 元件裝載完成,系統自己調 componentDidMount(){ this.startRunImage(); } //自動輪播 startRunImage(){ var scrollView = this.refs.scrollView; if(this._max <= 1){ // 只有一個則不啟動定時任務 return; } this._timer = setInterval(function () { this._index++; if(this._index >= this._max){ this._index = 0; } scrollView.scrollTo({x:this._index * width},true); // 重置小圓點指示器 this.refreshFocusIndicator(); }.bind(this), 2000); } //重新整理指示器 refreshFocusIndicator(){ this.setState({selectedImageIndex:this._index}); } //程式退出 // 元件即將解除安裝 componentWillUnmount(){ clearInterval(this._timer); } onBannerPressed(){ Alert.alert('溫馨提醒','你點選了第'+(this._index+1)+'張圖片',[ {text:'取消',onPress:()=>ToastAndroid.show('你點選了取消~',ToastAndroid.SHORT)}, {text:'確定',onPress:()=>ToastAndroid.show('你點選了確定~',ToastAndroid.SHORT)}]); } } const styles = StyleSheet.create({ container: { flex: 1, //表示 weight=1 backgroundColor:'#f2f2f2' }, topView:{ height:44, backgroundColor:'#ff5400', justifyContent:'center', alignItems:'center' }, topTitile:{ fontSize:20, color:'white' }, headerView:{ }, indicatorContainer:{ height:30, backgroundColor:'rgba(0,0,0,0.1)', position:'absolute', width:width, bottom:0, flexDirection:'row', //裡面子控制元件的排列方式，水平排列 justifyContent:'center', alignItems:'center' }, inputView:{ marginTop:10 }, textInputStyle:{ backgroundColor:'#fff', height:44, borderBottomColor:'#ddd', borderBottomWidth:1, paddingLeft:15, paddingRight:15 }, btnView:{ width:width-30, height:44, backgroundColor:'#ff5400', justifyContent:'center', alignItems:'center', marginTop:20, marginLeft:15, marginBottom:20 }, btnText:{ color:'white', fontSize:16 }, //輪播圖相關 indicator:{ fontSize:38, color:'white' }, active_indicator:{ fontSize:38, color:'#ff5400' } }); AppRegistry.registerComponent('Demo1', () => Demo1);
3、執行效果：
