一、使用環(huán)境
- Mac 電腦 系統(tǒng)10.14.2
- Xcode9.4
- react-native-cli版本 2.0.1
- react-native: 0.57.3
- webstorm
二、導(dǎo)航使用
雖然系統(tǒng)有Navigator可以用，但是0.44版本后就不在推薦使用，而是讓我們使用第三方導(dǎo)航組件react-native-deprecated-custom-components
注意：從0.44版本開(kāi)始嫩码，Navigator被從react native的核心組件庫(kù)中剝離到了一個(gè)名為react-native-deprecated-custom-components的單獨(dú)模塊中，而且官方推薦使用React Navigation導(dǎo)航組件，這個(gè)已經(jīng)默認(rèn)為官方推薦了
所有本文介紹的也是react-native-deprecated-custom-components
1讯沈、既然是使用第三方組件，所以第一步就是安裝組件
npm install react-native-deprecated-custom-components --save
2婿奔、在使用導(dǎo)航組件的地方導(dǎo)入組件
import {Navigator} from 'react-native-deprecated-custom-components'
3缺狠、配置導(dǎo)航組件主要使用三個(gè)屬性
- initialRoute
- configureScene
- renderScene
3.1 initialRoute：我也不用貼出官方的英文，我直接說(shuō)中文理解為用于初始化路由
initialRoute：其參數(shù)對(duì)象中的各個(gè)屬性如下：
{
component: function, //加載的視圖組件
title: string, //加載視圖的標(biāo)題
passPros: object, //傳遞的數(shù)據(jù)
backButtonIcon: Image.propTypes.source, // 后退按鈕圖標(biāo)
backButtonTitle: string, //后退按鈕標(biāo)題
leftButtonIcon: Image.propTypes.soruce, // 左側(cè)按鈕圖標(biāo)
leftButtonTitle: string, //左側(cè)按鈕標(biāo)題
onLeftButtonPress: function, //左側(cè)按鈕點(diǎn)擊事件
rightButtonIcon: Image.propTypes.soruce, // 右側(cè)按鈕圖標(biāo)
rightButtonTitle: string, //右側(cè)按鈕標(biāo)題
onRightButtonPress: function, //右側(cè)按鈕點(diǎn)擊事件
}
- configureScene： configureScene(route, routeStack)這個(gè)函數(shù)是optional可選屬性萍摊，用來(lái)處理場(chǎng)景的動(dòng)畫(huà)和手勢(shì)挤茄。它會(huì)要求兩個(gè)參數(shù)route和routestack，route如同renderScene中的route一樣是將要處理的界面的路由冰木，routestack則是界面跳轉(zhuǎn)關(guān)系的集合穷劈， 配置場(chǎng)景跳轉(zhuǎn)方向
(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
設(shè)置跳轉(zhuǎn)方向
* - Navigator.SceneConfigs.PushFromRight (default) 默認(rèn)
* - Navigator.SceneConfigs.FloatFromRight
* - Navigator.SceneConfigs.FloatFromLeft
* - Navigator.SceneConfigs.FloatFromBottom
* - Navigator.SceneConfigs.FloatFromBottomAndroid
* - Navigator.SceneConfigs.FadeAndroid
* - Navigator.SceneConfigs.SwipeFromLeft
* - Navigator.SceneConfigs.HorizontalSwipeJump
* - Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
* - Navigator.SceneConfigs.HorizontalSwipeJumpFromLeft
* - Navigator.SceneConfigs.VerticalUpSwipeJump
* - Navigator.SceneConfigs.VerticalDownSwipeJump
3.renderScene：渲染參數(shù)renderScene(route, navigator)，設(shè)置導(dǎo)航條跳轉(zhuǎn)參數(shù)
本文使用代碼
render() {
return (
<View style={styles.container}>
<Navigator
initialRoute={{
name: '首頁(yè)',
component:Home
}}
configureScene={
(route) => {
return ({
...Navigator.SceneConfigs.PushFromRight,
gestures: null,
});
}
}
//導(dǎo)航條跳轉(zhuǎn)傳遞參數(shù)
renderScene={
(route, navigator) => {
let Component = route.component;
// 沒(méi)有參數(shù)
// return <Component navigator={navigator} />
// 有參數(shù)
return <Component {...route.params} navigator={navigator} />
}
}>
</Navigator>
</View>
);
}
4踊沸、使用導(dǎo)航實(shí)現(xiàn)功能
主頁(yè)點(diǎn)擊--->詳情（主頁(yè)送一只玫瑰花給詳情）玫瑰花是正向傳值的參數(shù)==========正向傳值
詳情點(diǎn)擊--->主頁(yè)（詳情送一盒巧克力給主頁(yè)）歇终，巧克力是逆向傳值的參數(shù)=========逆向傳值
A、主頁(yè)代碼
export default class Home extends Component{
// 初始化方法
constructor(props){
super(props);
this.state = {
currentMessage: '原始值' //定義屬性
}
}
gotoHomeDetail(){
// 這里保存一下是為了防止后續(xù)事件操作的時(shí)候this的執(zhí)行改變
let _this = this;
// 使用push 方法跳轉(zhuǎn)雕沿，里面是參數(shù)
this.props.navigator.push({
component: HomeDetail,
params: {
name: '主頁(yè)送的一支玫瑰花', //正向傳值參數(shù)
onCallBack: function (message) { //逆?zhèn)髦到邮芎瘮?shù)
_this.setState({currentMessage: message});
}
}
})
}
render(){
return (
<View style={styles.container}>
<Text style={styles.text}>我是主頁(yè)</Text>
<Text style={styles.detailText}
onPress={()=>{
// 點(diǎn)擊調(diào)用導(dǎo)航跳轉(zhuǎn)
this.gotoHomeDetail();
}}
>點(diǎn)擊送詳情一枝花</Text>
<Text style={styles.callBackText}>回調(diào)：{this.state.currentMessage}</Text>
</View>
)
}
}
B 练湿、詳情代碼
export default class HomeDetail extends Component{
// 初始化方法
constructor(props){
super(props);
}
//跳轉(zhuǎn)返回頁(yè)面
gotoPopHomePage= () =>{
// 獲取導(dǎo)航
const {navigator} = this.props;
// 逆?zhèn)鲄?shù)
this.props.onCallBack('詳情送的巧克力');
// 調(diào)用pop 返回
if(navigator){
navigator.pop();
}
}
render(){
return (
<View style={styles.container}>
<Text style={styles.text}>我是詳情</Text>
<Text style={styles.text}>我收到主頁(yè)傳值:{this.props.name}</Text>
<Text style={styles.callBackText}
{/*點(diǎn)擊調(diào)用返回導(dǎo)航方法*/}
onPress={this.gotoPopHomePage}>
回調(diào)主頁(yè)巧克力</Text>
</View>
)
}
}
效果圖
其他資料
ReactNative從零開(kāi)始筆記1-初始化項(xiàng)目
ReactNative從零開(kāi)始筆記2-組件的生命周期
ReactNative從零開(kāi)始筆記3-state(狀態(tài))與props(屬性)
ReactNative從零開(kāi)始筆記4-PropTypes使用
ReactNative從零開(kāi)始筆記5-組件傳值(父子組件/兄弟組件)
ReactNative從零開(kāi)始筆記6-導(dǎo)航頁(yè)面?zhèn)髦担ㄕ齻骱湍鎮(zhèn)鳎?/a>
