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

Question

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

我已经在这里建模了，但是它不起作用：如下所示，我想使用标题中的 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' />;
   }
}

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

标签： react-nativereact-navigation

Answer 1

您无法在 headerLeft 中访问组件的道具，但您可以像这样直接使用导航：

  <Button onPress={()=> navigation.navigate('NewRecipeForm')}>