时间戳

首页 > 解决方案 > React Navigation 添加保存按钮

reactjs - React Navigation 添加保存按钮

问题描述

我正在使用 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函数来更新和查询 api。state

以下是标签导航中应用程序的外观： 在此处输入图像描述

标签： reactjsreact-nativereduxreact-reduxreact-navigation

解决方案

如果您已经在使用 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);
}

推荐阅读