如何在 React Native 中使用 stackNavigation 更改屏幕？

debugcn 发表于 Dev

就在前面

我有一个屏幕，在标题中包含转到另一个屏幕的按钮。

我已经在这里建模，但它不起作用：如下所示，我想使用标题中的 Button 将屏幕从 RecipeList 更改为 NewRecipeForm

const AppStackNavigator = createStackNavigator({
 List: {
  screen: RecipesList,
  navigationOptions: {
    title:'RecipesList',
    headerLeft: (
      <Button onPress={()=>this.props.navigation.navigate('NewRecipeForm')}>
      <Text>+</Text>
      </Button>
    )
    }},
 NewRecipeForm: {screen: CreateRecipeForm, 
        navigationOptions: {title:'Add new recipe'}},
  Details: {screen: RecipesDetails, navigationOptions: {title:'RecipeDetails'}},

export default class App extends React.Component {
 render() {
  return <AppStackNavigator initialRouteName='List' />;
   }
}

我希望你能帮助我解决问题

杰娃

您可以像下面这样使用您的堆栈导航器，您可以在 createStackNavigator 本身中提供您的 navigationOptions 属性的同时解构您的导航属性

const AppStackNavigator = createStackNavigator({
    List: {
        screen: RecipesList,
        navigationOptions: ({navigation}) => {  //destructure the navigation property here 
            return {
                title: 'RecipesList',
                headerLeft: (
                    <Button onPress={() => navigation.navigate('NewRecipeForm')}>
                        <Text>+</Text>
                    </Button>
                )
            }
        }
    },
    NewRecipeForm: {
        screen: CreateRecipeForm,
        navigationOptions: { title: 'Add new recipe' }
    },
    Details: { screen: RecipesDetails, navigationOptions: { title: 'RecipeDetails' } }

});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。