navigation.setoptions（）在React本地（expo环境）中不起作用

Question

我在React本地（世博环境）导航有问题。我想使用navigation.setoptions()在“singleproducteditscreen”中的headerright上放置一个保存按钮，但是会抛出错误消息，该消息在附加的ss中给出。

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

"SingleProductEditScreen.navigationOptions()"

如何访问和修改“SingleProductEditScreen”组件中的标头部分？

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


            
   


            
 共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..
}

     
链接到此处的文档
				
     


                
     

                
     
            
    

            
   
                      

相关问题

• 更新到 4.0 后无法连接到珊瑚开发板：mdt 外壳不起作用
• SSH密钥问题Git-CPanel -权限被拒绝(publickey)。致命错误:无法从远程存储库中读取
• 使用--proxy-user、--keytab和--主体参数在hadoop kerberos中提交火花
• kerberos Keytab用于在linux环境中自动化脚本作业
• Hadoop Oozie shell操作中的kerberos票证和委托令牌使用
• 如何让 Hadoop 客户端在安全 （Kerberos） 集群中为用户提供正确的凭据
• Proguard不处理FXML中的onAction调用
• Visual Studio Code 中的 JUnit
• 如何从命令行排除mvn构建路径中的特定苍蝇？
• 如何从源代码中正确构建keycloak
• 如何解决“HttpAuthenticationFactory的机制[KEYCLOAK]中没有所需的机制'BASIC'”
• 如何从 Git 克隆存储库并在 Java 中自动运行 Maven 构建
• java 13 jar文件在java 17中不起作用，收到错误UnafftedClassVersionError
• 为什么使用proguard混淆时调用不起作用
• 在Windows Git bash中工作时，gitlab的Git克隆在linux上失败
• 密钥斗篷电子邮件验证不起作用，并且通过密钥斗篷接收任何电子邮件
• eclipse中的Java运行时环境内存不足消息
• fx:id="grid "在控制器中保持为空
• 如何填充在JavaFx Scene Builder中设计的fxml文件中定义的TableView
• JavaFX控制器中的NullPointerException

Answer 1

热门标签

Answer 2

相关问题

Answer 3

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

链接到此处的文档