首先要确认已经配置好react-native的环境。
#创建一个本机应用,SimpleApp,然后进入项目目录
react-native init SimpleApp
cd SimpleApp
#通过npm安装最新版本的react-navigation
npm安装,节省react-navigation
#运行程序
react-native运行android
之前
<强>引入栈导航器
对于我们的应用程序,我们想要使用堆栈式导航器,因为我们想要一个概念的“堆栈”导航,其中每个新屏幕都放在堆栈顶部,然后从堆栈顶部移除一个屏幕。
从“反应”进口的反应;
进口{
AppRegistry,
文本,
从“react-native”};
从“react-navigation”进口{StackNavigator};
类桌面的延伸反应。组件{
静态navigationOptions={
标题:“欢迎世界”,
};
呈现(){
返回& lt; Text>你好,导航! & lt;/Text>;
}
}
之前
const SimpleApp=StackNavigator ({
:{屏幕:屏},
});
AppRegistry。registerComponent (SimpleApp,()=比;SimpleApp);
之前
屏幕的标题在静态导航选项中是可配置的,在这里可以设置许多选项来配置导航器中的屏幕显示。
添加一个新的屏幕
类ChatScreen延伸反应。组件{
静态navigationOptions={
标题:和露西聊天,
};
呈现(){
回报(
& lt; View>
& lt; Text>聊天Lucy
& lt;/View>
);
}
}
然后在桌面的添加一个按钮,链接到ChatScreen
类桌面的延伸反应。组件{
静态navigationOptions={
标题:“欢迎”,
};
呈现(){
const{导航}=this.props.navigation;
回报(
& lt; View>
& lt; Text>你好,聊天程序! & lt;/Text>
& lt;按钮/比;
& lt;/View>
);
}
之前
最后将添加的两个页面添加到StackNavigator中
const SimpleApp=StackNavigator ({
:{屏幕:屏},
聊天:{屏幕:ChatScreen},
});
在这里,可以传递参数,从主屏幕传递
类桌面的延伸反应。组件{
静态navigationOptions={
标题:“欢迎”,
};
呈现(){
const{导航}=this.props.navigation;
回报(
& lt; View>
& lt; Text>你好,聊天程序! & lt;/Text>
& lt;按钮/比;
& lt;/View>
);
}
}
之前
ChatScreen接收参数
类ChatScreen延伸反应。组件{//导航屏幕的选项可以被定义为一个函数的道具:
静态navigationOptions=({导航})=比;({
标题:“聊天$ {navigation.state.params.user}”,
});
呈现(){//屏幕目前的路线是通过“props.navigation.state”:
const {params}=this.props.navigation.state;
回报(
& lt; View>
& lt; Text>聊天{params.user} & lt;/Text>
& lt;/View>
);
}
}
之前
添加第三个页面,三个。js, ChatScreen跳转到三
进口的反应,从“反应”{组件};
进口{
AppRegistry,
文本,
看来,
按钮,
从“react-native”};
三班延伸反应。组件{
静态navigationOptions={
标题:“三Sceen”,
};
呈现(){
const{返回}=this.props.navigation;
回报(
& lt;按钮
title=盎厝ァ?
类ChatScreen
扩展的反应。组件{
静态navigationOptions={
标题:和露西聊天,
};
呈现(){
const{导航}=this.props.navigation;
回报(
& lt; View>
& lt; Text>聊天Lucy
& lt;按钮
onPress={()=比;
导航(三)}
title=癟hreeScreen”/比;
& lt;/View>
);
}
}
之前
最后的结果如下:
react-native使用react-navigation进行页面跳转导航的示例
