React Native中Navigator的安装与使用

一、安装Navigator

1.安装react-native-deprecated-custom-components

npm install react-native-deprecated-custom-components --save

2.若npm安装报错，则执行下面命令

npm i react-native-deprecated-custom-components --save

3.若还未解决则使用yarn命令（前提是自己有yarn的配置环境）

yarn add react-native-deprecated-custom-components --save

二、使用Navigator

说明：本demo为男生给女生送一枝玫瑰，女生回赠巧克力。包含了父子组件的通信

1.引入Navigator

import {Navigator} from "react-native-deprecated-custom-components"

2.页面A（用于放置父组件Boy和子组件Girl）：

<Navigator initialRoute={{ //Boy为默认显示组件 component: Boy }} renderScene={(route,navigator)=>{ let Component = route.component; return <Component navigator={navigator} {...route.params}/> }} ></Navigator>

3.父组件Boy（父组件）：

<View style={styles.container}> <Text style={styles.text}>I am Boy</Text> <Text style={styles.text} onPress={ ()=>{ this.props.navigator.push({ component:Girl, params:{ word:'一枝玫瑰', onCallBack:(word)=>{ this.setState({ word:word }) } } }) } } >送女孩一支玫瑰</Text> <Text style={styles.text}>{this.state.word}</Text> </View>

4.子组件Girl（子组件）：

<View style={styles.container}> <Text style={styles.text}> I am Girl. </Text> <Text style={styles.text}> 我收到了男孩送的玫瑰{this.props.word} </Text> <Text style={styles.text} onPress={ ()=>{ this.props.onCallBack('一盒巧克力'); //删除组件 this.props.navigator.pop() } } > 回赠巧克力 </Text> </View>

 

转载于:https://www.cnblogs.com/piaobodewu/p/9847088.html