react-navigation: 在每个屏幕中包含一个组件

Question

我正在使用 StackNavigator 和 redux，如下所示。将 Component 添加到我的所有屏幕的最干净的方法是什么？我尝试在 AppWithNavigationState 和 AppNavigator 中添加 child Component 但没有成功。

<Provider store={store}>
  <AppWithNavigationState />
</Provider>

const AppNavigator = StackNavigator({
  Login: { screen: Login },
  Main: { screen: Main },
}, {
  headerMode: 'none',
  }
})


const AppWithNavigationState = ({ dispatch, router }) => {
  return(
    <AppNavigator navigation={addNavigationHelpers({ dispatch, state: router })} />
  )
};

const mapStateToProps = (state) => ({
  state,
});

export default connect(mapStateToProps)(AppWithNavigationState);

Answer 1

您可以尝试添加兄弟组件而不是添加子组件。试试下面的例子。

例子

const AppWithNavigationState = ({ dispatch, router }) => {
  return(
    <View>
        <AppNavigator navigation={addNavigationHelpers({ dispatch, state: router })} />
        <DefaultComponentForEachScreen />
    </View>
  )
};

react-navigation: 在每个屏幕中包含一个组件

react-navigation: Include a Component in each screen

reactjs

react-native

react-navigation