React Navigation 添加保存按钮

Posted 2023-02-23

【中文标题】React Navigation 添加保存按钮

【英文标题】：React Navigation add save button

【发布时间】：2019-02-20 22:42:50

【问题描述】：

我正在使用 React Navigation 进行路由。当用户打开 Stock Item 进行修改时，我想添加一个 Save 按钮，该按钮从 redux state 获取所有修改后的变量，并 将它们查询到API 端点

目前我只能像这样以非常静态的方式添加保存按钮：

const Stack = createStackNavigator(
    
        Home: 
            screen: Tabs,
            navigationOptions: 
                header: null,
            ,
        ,
        StockScreen: 
            screen: StockScreen,
            navigationOptions: 
                headerRight: (

                    <Button
                      onPress=() => 
                          alert('This is a button!');
                      
                      title="Save"
                      color="#fff"
                    />
                  ),
            ,
        ,
    ,
    
    
);

我有我的标签导航器：

let StockTabs = createMaterialTopTabNavigator(
    
        General: 
            screen: GeneralStockTab,
        ,
        Pricing:
            screen: PricingTab,
        ,
        Stock:
            screen: StockTab
        ,
        Other:
            screen: OtherTab,
        ,
    ,
    
    
);

现在这个选项卡式导航像这样连接到redux：

const mapStateToProps = state => (
    item: state.stockItem.item,
    itemLoading: state.stockItem.loading,
    itemError: state.stockItem.error,
  );

const mapDispatchToProps = (dispatch) => 
    return (
        fetchStockItem: bindActionCreators(fetchStockItem, dispatch)
    )


  const mergeProps = (state, dispatch, ownProps) => 
    return (
        ...ownProps,
        screenProps: 
          ...ownProps.screenProps,
          ...state,
          ...dispatch,
        
    )
  

export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(StockTabs);

我希望能够有一个 动态布尔 来允许按下 保存按钮，这取决于是否修改了值以及按下保存的时间我想运行 redux 函数 来更新 state 和query api。

标签导航中的应用在视觉上是这样的：

【参考方案1】：

如果您已经在使用 redux，那么您可以创建一个连接的 <Button/> 组件。布尔值可以通过类似的方式传递，将其添加到 reducer 并将其链接到 mapStateToProps，然后链接到组件。

const Button = (testDispatch) => 
  return (
    <Button
      onPress=testDispatch
      title="Save"
      color="#fff"
    />
  )

function mapDispatchToProps(dispatch) 
  return 
    testDispatch: () => dispatch(testDispatch())
  ;


const ConnectedButton = connect(
   null,
   mapDispatchToProps,
 )(Button);

【讨论】：

按钮一在我设置redux的app.js中还能用吗

您可以将它分离为组件列表，并在需要的任何地方使用它，只要它使用react-redux绑定存储即可

imgur.com/SiSNoon 我在执行时遇到了一个奇怪的错误，你知道我该如何解决这个问题吗？

不确定，但请尝试在 mapDispatchToProps 之后删除连接中的 ,

谢谢，我认为除了错误命名我得到的组件之外，它现在看起来像这样：imgur.com/7s2HKBj