Как изменить экран, используя stackNavigation в React Native?

Question

У меня есть один экран, который в заголовке состоит из кнопки, чтобы перейти на другой экран.

У меня уже есть модель, но она не работает: как показано ниже, я хочу изменить экран с 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' />;
   }
}

Я надеюсь, что вы поможете мне с решением

Answer 1

Вы можете использовать следующий код внутри вашего RecipesList Component вместо того, чтобы иметь его внутри createStackNavigator (). Смотрите Snack для полной реализации.

static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: "RecipesList",
      headerLeft: (
        <Button
          onPress={() => navigation.navigate('NewRecipeForm')}
          title="+"
        />
      ),
    };
  };

Answer 2

Вы можете использовать свой стековый навигатор, как показано ниже, вы можете деструктурировать свойство навигации, предоставив свойство навигатора, а также в самом createStackNavigator

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' } }

});

Answer 3

Вы не можете получить доступ к реквизитам вашего компонента в headerLeft, но вы можете напрямую использовать навигацию следующим образом:

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