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我需要更改的注意事项：

({navigation})已作为参数添加到navigationOptions。
在声明(时在{之前使用navigationOptions。以及随后的右括号。
onPress函数也进行了更改，以利用navigation参数。

希望这会有所帮助！：）

在createStackNavigator中进行React-Native导航

1 个答案: