首先安装 Navigator
npm i -S react-native-deprecated-custom-components
引入Navigator
import {Navigator} from 'react-native-deprecated-custom-components'
再次说一遍报错 就把node_module删了重新 装 ,我严重怀疑是不是 要每次装新包的时候都删除一遍/~~/
要实现一个页面到另外页面的跳转
主代码
import {Navigator} from 'react-native-deprecated-custom-components'
import Boy from './Boy'
<Navigator
initialRoute = {{component:Boy}}
renderScene ={(route,navigator)=>{
let Component = route.component
return <Component navigator={navigator} {...route.params} />
}}
>
</Navigator>
组件1代码
import React,{Component} from 'react';
import {View, Text,StyleSheet} from 'react-native';
import Girl from "./Girl"
export default class Boy extends Component{
constructor(props){
super(props)
this.state={
word:''
}
}
render(){
return (<View style={styles.container}>
<Text style={styles.text}>I'm a 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>)
}
}
/*
* this.props.navigator.push({
component:Girl,
params:{
word:'一朵玫瑰',
onCallBack:(word)=>{
this.setState({word:word});
}
}
})
* navigator 会从上级传递过来 作为props 的属性存在
* push方法 转到 那个组件 (参数1:component,参数2:params 传到下个页面的参数)
* pop方法 关闭当前页面
*
* */
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'gray',
justifyContent:'center',
},
text:{
fontSize:20,
}
})
组件代码2
import React,{Component} from 'react';
import {View, Text,StyleSheet} from 'react-native';
import Boy from './Boy';
export default class Girl extends Component{
constructor(props){
super(props);
this.state={
}
}
render(){
return(
<View style={styles.container}>
<Text style={styles.text}>
I'm a girl
</Text>
<Text style={styles.text}>
我收到了男孩送的 {this.props.word}
</Text>
<Text style={styles.text}
onPress={()=>{
this.props.onCallBack('巧克力')
this.props.navigator.pop()
}}
>
回赠巧克力
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'pink',
justifyContent:'center',
},
text:{
fontSize:20,
}
})