React|React Navigation 入门(二) - StackNavigator 的使用与传递参数
RN 版本:0.50在上一篇文章《StackNavigator 快速入门》中,介绍了 StackNavigator 的快速使用方法,本篇在其基础上进行补充,对 StackNavigator 进行更加详细的介绍。
操作环境:Windows 10
React Navigation 版本:1.0.0-beta.20
文章已同步至 CSDN:http://blog.csdn.net/qq_24867873/article/details/78617509
StackNavigator 的介绍 我们依然是先写个首页用来展示:
export default class HomeScreen extends Component {static navigationOptions = {
title: 'Welcome'
}render() {
return Hello, Chat App! ;
}
}
然后通过 StackNavigator 进行注册:
const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
}
});
可以发现,这里设置 title 的方式和上一篇不一样了。上一篇中,我们在对 HomeScreen 进行注册的时候进行了
headerTitle
的设置,就像下面这样。const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: 'Home'
}
});
而在这篇文章中,我们把
navigationOptions
单独拿了出来写成了一个静态变量。这种写法也是可以的,当通过 StackNavigator
加载到 Home
页面的时候,会自动找到这个变量读取它的各个参数并应用在 Home
页面上。就像组件的生命周期刚开始的时候会先读取 static defaultProps
中的默认属性。另外在这里
headerTitle
与 title
的效果是一样的,都是顶部 ‘ToolBar’ 的标题。它们两个具体有什么区别,打算在下一篇文章再做介绍。效果图直接用官网的。文章图片
我是官网效果图 添加一个新的页面 这个在上一篇文章也已经说过了,如果你看过上一篇文章,这里随便看看就好了。
我们新建一个
ChatScreen
页面:export default class ChatScreen extends Component {static navigationOptions = {
title: 'Chat with Lucy',
}render() {
return (
Chat with Lucy
);
}
}
然后在
HomeScreen
中添加一个按钮使其被点击的时候能跳转到 ChatScreen
。这里我们就要用到 navigate
方法并且给它填入正确的 routeName
参数,我们这里定义的是 Chat
。export default class HomeScreen extends Component {static navigationOptions = {
title: 'Welcome'
};
render() {
const {navigate} = this.props.navigation;
return
Hello, Chat App!
}
}
当然了,最最重要的不要忘记了在
StackNavigator
中进行注册:const RootNavigator = StackNavigator({
Home: {screen: HomeScreen},
Chat: {screen: ChatScreen}
});
现在,我们点击按钮就可以进行页面之间的切换了。
文章图片
我也是官网效果图 传递参数 任何页面之间的切换都避免不了参数的传递。还记得
navigate(routeName, params, action)
方法的第二个参数吗?params
就是要传递的参数。render() {
const {navigate} = this.props.navigation;
return
Hello, Chat App!
}
这里我们给
ChatScreen
传递了一个值为 'Lucy' 的字符串 user
,然后就可以通过 this.props.navigation.state.params
来取到你想要的参数。export default class ChatScreen extends Component {// Nav options can be defined as a function of the screen's props:
// Nav options 可以被定义成一个页面属性的函数(原谅我英语太差)
// 格式就像下面这样,你就可以取到 navigation 了
static navigationOptions = ({navigation}) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
// The screen's current route is passed in to `props.navigation.state`:
// 屏幕当前的路由被传递给了 `props.navigation.state`
const {params} = this.props.navigation.state;
return (
Chat with {params.user}
);
}
}
文章图片
效果和上面一毛一样 你可以改一下
user
的值,然后看看有什么变化。【React|React Navigation 入门(二) - StackNavigator 的使用与传递参数】本文到此结束,下一篇打算详细写写
StackNavigator
的各个属性。文章图片
欢迎关注我的微信公众号
推荐阅读
- react|react 安装
- typeScript入门基础介绍
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- Android|Android sqlite3数据库入门系列
- Android下的IO库-Okio源码解析(一)|Android下的IO库-Okio源码解析(一) 入门
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
- react-navigation|react-navigation 动态修改 tabBar 样式
- 深度学习-入门
- 第三章|第三章 进校园重拾旧梦 登讲台初为人师第一节 接乱班面临考验 ,遇高师指点入门