一、安装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>