navigation.setOptions() 在 React Native（博览会环境）中不起作用

Posted 2023-02-16

【中文标题】navigation.setOptions() 在 React Native（博览会环境）中不起作用

【英文标题】：navigation.setOptions() doesn't work in React Native (expo environment)

【发布时间】：2021-02-16 20:41:46

【问题描述】：

我在 React Native（Expo 环境）中遇到导航问题。 我想使用navigation.setOptions() 在"SingleProductEditScreen" 中的headerRight 上放置一个保存按钮，但是抛出了附加的ss 中给出的错误消息。

另外，由于这个按钮需要访问组件状态，我不想在外面使用

"SingleProductEditScreen.navigationOptions()"

如何访问和修改"SingleProductEditScreen"组件中的header部分？

    const MainNavigator = createStackNavigator(
      
        Home: HomeScreen,
        Categories: CategoriesScreen,
        Recipe: RecipeScreen,
        RecipesList: RecipesListScreen,
        Ingredient: IngredientScreen,
        Search: SearchScreen,
        IngredientsDetails: IngredientsDetailsScreen,
        Orders:OrdersScreen,
        SingleOrder:SingleOrder,
        OrderDetails:OrderDetailsScreen,
        Register:RegisterScreen,
        Edit:EditScreen,
        EditScreenSingle:SingleProductEditScreen
      ,
      
        initialRouteName: 'Home',
        //headerMode: 'float',
        
        defaulfNavigationOptions: ( navigation ) => (
          
          headerTitleStyle: 
            fontWeight: 'bold',
            textAlign: 'center',
            flex: 1,
          ,
        )
      
    ); 



    const DrawerStack = createDrawerNavigator(
      
        Main: MainNavigator
      ,
      
        drawerPosition: 'left',
        initialRouteName: 'Main',
        drawerWidth: 250,
        contentComponent: DrawerContainer
      
    );


     
    export const AppContainer = createAppContainer(DrawerStack);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>




<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<!-- end snippet -->

<!-- begin snippet: DrawerContainer.js -->

<!-- language: lang-js -->

    export default class DrawerContainer extends React.Component 
      constructor(props)
        super(props);
      
      render() 
        const  navigation  = this.props;
        return (
          <View style=styles.content>
            <View style=styles.container>
              <MenuButton
                title="HOME"
                source=require('../../../assets/icons/home.png')
                onPress=() => 
                  navigation.navigate('Home');
                  navigation.closeDrawer();
                
              />
              <MenuButton
                title="CATEGORIES"
                source=require('../../../assets/icons/category.png')
                onPress=() => 
                  navigation.navigate('Categories');
                  navigation.closeDrawer();
                
              />
              <MenuButton
                title="SEARCH"
                source=require('../../../assets/icons/search.png')
                onPress=() => 
                  navigation.navigate('Search');
                  navigation.closeDrawer();
                
              />
              <MenuButton
                title="ORDERS"
                source=require('../../../assets/icons/order.png')
                onPress=() => 
                  navigation.navigate('Orders');
                  navigation.closeDrawer();
                
              />
              <MenuButton
                title="REGISTER"
                source=require('../../../assets/icons/register.png')
                onPress=() => 
                  navigation.navigate('Register');
                  navigation.closeDrawer();
                
              />
                <MenuButton
                title="EDIT CONTENT"
                source=require('../../../assets/icons/edit.png')
                onPress=() => 
                  navigation.navigate('Edit');
                  navigation.closeDrawer();
                
              />
            </View>
          </View>
        );
      
    

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>



    const EditScreen = connect(mapStateToProps)((props)=>
        console.log('props in Edit page: ',props);
        const navigation=props;
        const productEditHandler=(product)=>
          props.navigation.navigate('EditScreenSingle',  product );
        ;
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>







const SingleProductEditScreen= connect(mapStateToProps, mapDispatchToProps)((props)=>
    const navigation=props;
    const product=props.navigation.state.params.product;
    useLayoutEffect(()=>
                navigation.setOptions(
                    headerRight: () =>
                        <HeaderBtnSave
                            loading=saveBtnState===SAVE_BTN_LOADING
                            disabled=saveBtnState!==SAVE_BTN_ON
                            onPress=() => onSavePress()
                        />
                    )
            , [navigation]);
    return (
        <Text>some text</Text>
    )
)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

请不要将错误信息显示为图片

欢迎来到 Stack Overflow！记住要格式化段落中的代码引用，并在每一端打勾。

【参考方案1】：

navigation.setOption 在 v5 中可用，而您似乎正在使用 v4.x，因此您必须使用以下方法更新 SingleProductEditScreen 组件中的标题

class SingleProductEditScreen extends React.Component 
  static navigationOptions = 
    headerRight: () => (
      <Button
        onPress=() => alert('This is a button!')
        title="Info"
        color="#fff"
      />
    ),
  ;


  // etc..

链接到文档here