React Native中的Navigations关于navig

简介

最近项目中使用RN与原生配合进行混合开发，项目中使用了navigations来进行数据的传递、页面的跳转和标题栏显示。

知识点总结

• 标题栏标题的配置

1. 这个是正常的标题栏 Android是居左显示。

static navigationOptions = ({navigation}) =>{
  return{
    headerTitle:"标题"
  }
}

• 右标题栏的配置

1. 右标题栏显示一个可点击的文本

static navigationOptions = ({navigation}) =>{
  return {
    headerTitle:"标题",
    headerRight:<TouchableOpacity onPress = {()=> navigation.navigate("跳转页面路由名字")}>
                  <Text> 跳转</Text>
          </TouchableOpacity>
  }
}

2. 关于标题栏调用本地方法的一个实现

static navigationOptions = ({navigation}) =>{
    return {
      headerTitle:"标题",
      headerRight:<TouchableOpacity onPress = {()=>navigation.state.params.navigatePress()}>
                <Text> 跳转</Text>
          </TouchableOpacity>
    }
}

componentDidMount = () =>{
      this.props.navigation.setParams({navigatePress:this.handleTextClickListener})
}

handleTextClickListener = () =>{
      alert("文本的点击事件")
}

3. 上个页面传值也可显示在标题栏上

//第一个页面跳转到secondPage页面，并携带数据onePage
navigation.navigate("secondPage",{data:"onePage"})
//在secondPage页面取出数据
static navigationOptions = ({navigation}) =>{
      return{
            headerTitle:<Text> {navigation.getParam("data",""defaultValue)}</Text>
  }
}

本文未完，之后会持续更新内容，初次使用RN，若有错误在评论区欢迎讨论！