如果還沒(méi)有看過(guò)React-Native初體驗(yàn)二請(qǐng)先看React-Native初體驗(yàn)二在回來(lái)看。
ReactNativeTest項(xiàng)目的下載地址:github
1.reactNativeTest項(xiàng)目運(yùn)行的效果
2.實(shí)現(xiàn)啟動(dòng)頁(yè)
導(dǎo)航器的實(shí)現(xiàn)
1.定一個(gè)Welcome.js文件
2.在Welcome.js中使用Navigator導(dǎo)航器
3.給Navigator導(dǎo)航器初始化
Welcome.js文件代碼：
class Welcome extends React.Component {
/**
* 構(gòu)造器初始化
* @param props
*/
constructor(props) {
super(props);
//函數(shù)的定義并初始化
this.renderScene = this.renderScene.bind(this);
this.goBack = this.goBack.bind(this);
//監(jiān)聽(tīng)返回事件
BackAndroid.addEventListener('hardwareBackPress', this.goBack);
}
/**
* 監(jiān)聽(tīng)手機(jī)點(diǎn)擊返回按鈕
*/
goBack() {
return NaviGoBack(_navigator);
}
/**
* 渲染場(chǎng)景的函數(shù)：這里接收系統(tǒng)傳來(lái)的兩個(gè)參數(shù)，一個(gè)是路由對(duì)象，一個(gè)是導(dǎo)航器對(duì)象
*/
renderScene(route, navigator) {
let Component = route.component;//獲取到initialRoute路由中設(shè)計(jì)的Splash組件
_navigator = navigator;//導(dǎo)航器對(duì)象，在goBack（）函數(shù)中需要用到
return (
<Component navigator={navigator} route={route} />//返回一個(gè)渲染界面的Splash組件，并傳遞兩個(gè)參數(shù)
);
}
/**
* 界面跳轉(zhuǎn)的動(dòng)畫(huà)：這里接收系統(tǒng)傳來(lái)的兩個(gè)參數(shù)，一個(gè)是路由對(duì)象，一個(gè)是導(dǎo)航器對(duì)象
*/
configureScene(route, routeStack) {
return Navigator.SceneConfigs.PushFromRight;
}
/**
* initialRouter: 路由初始化配置信息，就是說(shuō)頁(yè)面加載時(shí)，第一次需要展現(xiàn)什么內(nèi)容
*configureScene: 場(chǎng)景轉(zhuǎn)換動(dòng)畫(huà)配置。在RN看來(lái)，從一個(gè)頁(yè)面切換到另外一個(gè)頁(yè)面，就是從一個(gè)場(chǎng)景切換到另外一個(gè)場(chǎng)景，這里配置的是場(chǎng)景動(dòng)畫(huà)信息，比如Navigator.SceneConfigs.FadeAndroid 就是淡入淡出
*renderScene: 渲染場(chǎng)景，讀取initialRouter傳來(lái)的數(shù)據(jù)，確定顯示那些內(nèi)容。
* */
render() {
return (
<Navigator
ref='navigator'
style={styles.navigator}
configureScene={this.configureScene}
renderScene={this.renderScene}
initialRoute={{
component: Splash,
name: 'Splash'
}}
/>
);
}
}
/**
* 彈性（Flex）寬高:
*
* 使用flex:1來(lái)指定某個(gè)組件擴(kuò)張以撐滿(mǎn)所有剩余的空間
*如果有多個(gè)并列的子組件使用了flex:1，則這些子組件會(huì)平分父容器中剩余的空間。
* 如果這些并列的子組件的flex值不一樣，則誰(shuí)的值更大，誰(shuí)占據(jù)剩余空間的比例就更大
*
* 注意：
* 組件能夠撐滿(mǎn)剩余空間的前提是其父容器的尺寸不為零。
* */
let styles = StyleSheet.create({
navigator: {
flex: 1
}
});
export default Welcome;
定時(shí)器的實(shí)現(xiàn)
1.定一個(gè)Splash.js文件
2.在構(gòu)造器中獲取導(dǎo)航器Navigator對(duì)象
3.設(shè)計(jì)定時(shí)，實(shí)現(xiàn)界面跳轉(zhuǎn)
Splash.js文件代碼：
/**導(dǎo)包*/
import React from 'react';
import {
StyleSheet,
Navigator,
StatusBar,
BackAndroid,
View,
Text,
Platform
} from 'react-native';
/**導(dǎo)包*/
import Splash from '../Splash';
/**導(dǎo)一個(gè)工具類(lèi)*/
import { NaviGoBack } from '../utils/CommonUtils';
var _navigator;
import React from 'react';
import {
Dimensions,
Image,
InteractionManager,
View,
Text,
} from 'react-native';
import AppMain from './page/AppMain.js';
/**獲取手機(jī)屏幕的寬和高*/
var {height, width} = Dimensions.get('window');
class Splash extends React.Component {
/***
* 構(gòu)造器
* 開(kāi)始了一個(gè)定時(shí)器setTimeout（），2500豪秒后跳轉(zhuǎn)到AppMain.js
* @param props
*/
constructor(props) {
super(props);
//獲取navigator對(duì)象，在welcome.js傳過(guò)來(lái)的
const {navigator} = props;//可以
//const {navigator} =this. props;//可以
//const {navigator} = this.props.navigator;//這個(gè)是不可以的，會(huì)報(bào)錯(cuò)
//const {navigator} = props.navigator;//這個(gè)是不可以的，會(huì)報(bào)錯(cuò)
this.timer = setTimeout(() => {
InteractionManager.runAfterInteractions(() => {
navigator.resetTo({
component: AppMain,
name: 'AppMain'
});
});
}, 2500);
}
/**
* 渲染界面，只有一張圖片
* @returns {XML}
*/
render() {
return (
<View style={{flex:1}}>
<Image
style={{flex:1,width:width,height:height}}
source={require('./image/ic_welcome.png')}
/>
</View>
);
}
}
export default Splash;
3.修改index.android.js文件
/**這里是導(dǎo)包，導(dǎo)入我們要使用的控件*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
/**導(dǎo)入一個(gè)自己寫(xiě)的js文件*/
import Welcome from './app/page/Welcome.js';
// 注冊(cè)應(yīng)用(registerComponent)后才能正確渲染
// 注意：只把應(yīng)用作為一個(gè)整體注冊(cè)一次，而不是每個(gè)組件/模塊都注冊(cè)
AppRegistry.registerComponent('reactNativeTest', () => Welcome);
4.運(yùn)行
1.來(lái)到項(xiàng)目根目錄，打開(kāi)cmd
2.執(zhí)行：
react-native start
``
3.來(lái)到項(xiàng)目根目錄，打開(kāi)新的cmd
4.執(zhí)行：
react-native run-android
5.效果：
3.實(shí)現(xiàn)首頁(yè)
1.定一個(gè)AppMain.js文件
2.監(jiān)聽(tīng)點(diǎn)擊返回按鈕
BackAndroid.addEventListener('hardwareBackPress', xxxxx);
3.實(shí)現(xiàn)頂部導(dǎo)航欄
<View style={styles.headerMenu}>
<View style={{flex:1,justifyContent:'center'}}>
<TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}>
<View style={{justifyContent:'flex-start',flexDirection:'row',alignItems:'center'}}>
<Image source={require('../image/hotel_ic_home.png')}
style={{width:20,height:26,marginLeft:8}}/>
</View>
</TouchableOpacity>
</View>
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<Text style={{fontSize: 20, textAlign: 'center'}} >首頁(yè) </Text>
</View>
<View style={{justifyContent:'flex-end',alignItems:'center',flex:1,flexDirection:'row'}}>
<TouchableOpacity onPress={()=>{this.onClickTitleBar(1)}}>
<Image source={require('../image/ic_action_search.png')}
style={{width:24,height:24,marginRight:8,alignItems:'center'}}/>
</TouchableOpacity>
</View>
</View>
4.實(shí)現(xiàn):ViewPagerAndroid
<ViewPagerAndroid
ref={viewPager => { this.viewPager = viewPager; }}
style={styles.flex1}
initialPage={0}
pageMargin={0}>
<View style={styles.page}>
<Text>Page 1</Text>
</View>
<View style={styles.page}>
<Text>Page 2</Text>
</View>
<View style={styles.page}>
<Text>Page 3</Text>
</View>
</ViewPagerAndroid>
5.實(shí)現(xiàn)底部導(dǎo)航欄:
<View style={styles.footerMenu}>
<TouchableOpacity onPress={() => this.onClick(1)}>
<Image source={require('../image/ic_menu_deal_off.png')} style={{width:33,height:33}} />
<Text style={styles.welcome} >首頁(yè) </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onClick(2)}>
<Image source={require('../image/ic_menu_poi_off.png')} style={{width:33,height:33}} />
<Text style={styles.welcome} >商城 </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onClick(3)} >
<Image source={require("../image/ic_menu_user_off.png")} style={{width:33,height:33,marginLeft:3}}/>
<Text style={styles.welcome} >個(gè)人中心 </Text>
</TouchableOpacity>
</View>
6.實(shí)現(xiàn)點(diǎn)擊事件：TouchableOpacity
<TouchableOpacity onPress={()=>{this.onClickTitleBar(0)}}>
.....
</TouchableOpacity>
AppMain.js文件代碼：
<Image source={require('../image/ic_menu_deal_off.png')} style={{width:33,height:33}} />
<Text style={styles.welcome} >首頁(yè) </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onClick(2)}>
<Image source={require('../image/ic_menu_poi_off.png')} style={{width:33,height:33}} />
<Text style={styles.welcome} >商城 </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.onClick(3)} >
<Image source={require("../image/ic_menu_user_off.png")} style={{width:33,height:33,marginLeft:3}}/>
<Text style={styles.welcome} >個(gè)人中心 </Text>
</TouchableOpacity>
</View>
</View>
);
}
}
/**
- 屬性介紹：
- flexDirection:
- style中指定flexDirection可以決定布局的主軸。子元素是應(yīng)該沿著水平軸(row)方向排列，還是沿著豎直軸(column)方向排列呢？默認(rèn)值是豎直軸(column)方向
- justifyContent:
*style中指定justifyContent可以決定其子元素沿著主軸的排列方式。子元素是應(yīng)該靠近主軸的起始端還是末尾段分布呢？亦或應(yīng)該均勻分布？對(duì)應(yīng)的這些可選項(xiàng)有：flex-start、center、flex-end、space-around以及space-between
- alignItems:
- 在組件的style中指定alignItems可以決定其子元素沿著次軸（與主軸垂直的軸，比如若主軸方向?yàn)閞ow，則次軸方向?yàn)閏olumn）的排列方式。子元素是應(yīng)該靠近次軸的起始端還是末尾段分布呢？亦或應(yīng)該均勻分布？對(duì)應(yīng)的這些可選項(xiàng)有：flex-start、center、flex-end以及stretch。
- backgroundColor 背景顏色
- borderColor 邊界顏色
*/
var styles = {
flex1: {
flex: 1,
},
page: {
alignItems: 'center',
flexDirection: 'row',
flex: 1,
justifyContent: 'center',
//borderWidth: 1,
borderColor: 'black',
},
headerMenu: {
flexDirection: 'row',
backgroundColor: '#F2F2F2',
height: 50,
paddingHorizontal: 10,
},
footerMenu: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: '#F2F2F2',
height: 60,
paddingHorizontal: 40,
},
img: {
alignItems: 'center',
justifyContent: 'center',
width:90,
height:90
},
welcome: {
fontSize: 10,
textAlign: 'center',
},
line: {
backgroundColor: '#cdcdcd',
height: 1,
},
}
export default AppMain;
6.運(yùn)行
1.來(lái)到項(xiàng)目根目錄，打開(kāi)cmd
2.執(zhí)行：
react-native start
3.來(lái)到項(xiàng)目根目錄，打開(kāi)新的cmd
4.執(zhí)行：
react-native run-android
5.效果：
7.最后附上整個(gè)reactNativeTest項(xiàng)目的結(jié)構(gòu)圖
來(lái)源：http://bbs.520it.com/forum.php?mod=viewthread&tid=2244