React-Native在createStackNavigator中导航

Question

我想导航当在createStackNavigator中单击到TouchableOpacity时。但我不能这样做。

回到我的导航不是一个功能

我怎样才能做到这一点？

const RootStack = createStackNavigator(
    {       
      Login:{screen: Login },
      EditProfile:{screen:EditProfileScreen},
      Main:{screen: MainScreen , navigationOptions: {
       headerTitle: (
        <View style={{flexDirection:'row', width:100+"%"}}>
            <TouchableOpacity style={{width:36,height:40,position:"absolute",right:10}} 
            onPress={()=> createStackNavigator.navigate("EditProfile")}
            >
                <AutoHeightImage width={36}  source={require('./img/user.png')}/>
            </TouchableOpacity>
        </View>
        ),
        headerLeft: null,
        headerTintColor: "white",
        headerStyle: {
          backgroundColor: '#34495e'
        } }},

    }, { initialRouteName:"Login "});

Answer 1

你是在正确的轨道上，但是你在代码中做了一些小的疏忽。

在为每个屏幕声明navigationOptions时，您必须确保传递navigation参数，以便您可以在navigationOptions代码块中调用它。

在react-navigation文件here中给出了这方面的一个例子

例：

createStackNavigator({
    Profile: {
        screen: ProfileScreen,
        navigationOptions: ({ navigation }) => ({
          title: ${navigation.state.params.name}'s Profile'`,
        }),
    },
});

请注意({navigation})属性中的navigationOptions参数。

在您的情况下，您的代码需要编辑为：

 Main: {
  screen: MainScreen,
  navigationOptions: ({ navigation }) => ({
    headerTitle: (
      <View style={{ flexDirection: 'row', width: 100 + '%' }}>
        <TouchableOpacity
          style={{ width: 36, height: 40, position: 'absolute', right: 10 }}
          onPress={() => navigation.navigate('EditProfile')}
        >
          <AutoHeightImage width={36} source={require('./img/user.png')} />
        </TouchableOpacity>
      </View>
    ),
  }),
}

我要改变的3件事要注意：

1. ({navigation})被添加为navigationOptions的一个参数。
2. 在(宣布{之前使用navigationOptions。以及随后的结束括号。
3. onPress函数也被改变以利用navigation参数。

希望这可以帮助！ :)