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

希望您能帮助我解决问题

Answer 1

您无法在headerLeft中访问组件的属性，但可以直接使用如下导航：

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

Answer 2

您可以在RecipesList组件中使用以下代码，而不是将其包含在createStackNavigator（）中。有关完整的实现，请参见此Snack。

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

Answer 3

您可以像下面那样使用堆栈导航器，可以在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' } }

});

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

3 个答案: