react-navigation 使用笔记 持续更新中

React-Navigation是目前React-Native官方推荐的导航组件,代替了原用的Navigator。最近开始接触,做个笔记


基本使用(此处基本使用仅针对导航头部而言,不包含tabbar等)

基础使用主要包括两部分

组件引入与定义路由

组件引入后,可以通过提供的api createStackNavigator来创建路由,每个路由元素都是一个对象

import { createStackNavigator } from 'react-navigation';
export default createStackNavigator({
Home: {
screen: App
},
Demos: {
screen: demo
},
DebugList: DebugList,
DebugDetail: DebugDetail
})

自定义header内容

在每个具体的页面中,可以通过设置navigationOptions对象来对header进行一定程度的自定义

static navigationOptions={
headerTintColor:'#000',
headerTitle: (
<Text style={{ flex: 1, textAlign: 'center', color: '#222222', fontSize: px2dp(18)}}>调试demo</Text>
),
headerRight: <View/>
};
--or--
static navigationOptions = ({ navigation, screenProps }) => {
return {
headerTintColor:'#000',
headerTitle: (
<Text style={{ flex: 1, textAlign: 'center', color: '#222222', fontSize: px2dp(18) }}>网络日志</Text>
),
// 这里之所以要判断 是因为在生命周期最开始的时候 这个params我们还没给他绑定点击事件
headerRight: <View><Text onPress={navigation.state.params?navigation.state.params.navigatePress:null}>清空</Text></View>
}
}

可以通过对象或者函数两种形式进行定义,函数定义时自带两个参数navigation和screenProps。其中navigation主要是路由传参内容,screenProps主要是在定义router的时候带着的参数,一会再把navigationOptions的具体属性补充一下TODO

header怎么和app中通信呢?

小白踩坑后知道navigationOptions中是不能直接访问reactComponent中的this对象的,因此也就不能直接和reactComponent进行通信,这个时候怎么办呢?答案就是操作navigation对象,我们可以通过在组件中重新定义navigation参数params的形式来处理,比如

static navigationOptions = ({ navigation, screenProps }) => {
return {
headerTintColor:'#000',
headerTitle: (
<Text style={{ flex: 1, textAlign: 'center', color: '#222222', fontSize: px2dp(18) }}>网络日志</Text>
),
// 这里之所以要判断 是因为在生命周期最开始的时候 这个params我们还没给他绑定点击事件
headerRight: <View><Text onPress={navigation.state.params?navigation.state.params.navigatePress:null}>清空</Text></View>
}
}
componentDidMount() {
this.props.navigation.setParams({
navigatePress:this._clearStorage
})
}
_clearStorage = () => {
global.storage.remove({
key:'netLog'
}).then((logs) => {
console.log('data removed')
this.setState(previousState => {
return {
logList: []
}
})
})
}

而在组件中去调用头部的内容时,也是主要去查询navigation这个对象中的state和params两个参数,先到这 上个厕所

上一篇:openstack kilo版本控制节点异常流量分析


下一篇:vba打开输入文件