使用 React-Navigation 在所有屏幕中显示组件 - React Native

Question

我想使用 React Navigation 在每个屏幕上显示一个类似按钮（或准确地说是 react-native-action-button）的组件。

React Navigation 是否在内部路由中有任何选项可以实现它一次并在所有地方使用？

注意：我不想在每个 .js 中导入组件 class 并在渲染中使用它。

参考 -> 在应用程序的每个屏幕中点赞。 Floating Action Button Reference

Answer 1

使用该按钮制作默认屏幕。每次当你想使用那个按钮时，用那个组件而不是视图来包装你的所有项目。例如 'DefaultScreen' 是带有默认组件的视图。像这样使用它：

render(){
  <DefaulScreen>
    {AllOtherItems}
  </DefaulScreen>
}

在 DefaultScreen 中，所有子项都像这样呈现：

class DefaultScreen extends Component {
  render(){
    <View>
     {this.props.children}
     {defaultComponentThatYouWantToPutWithCustomStyle}
    </View>
  }
}

Answer 2

您可以将主应用程序导航器放在容器组件中。此容器组件可以包含您的组件，该组件将显示在每个屏幕上。

Answer 3

在你的导航容器中像这样添加它`

  <NavigationContainer>
    <Stack.Navigator initialRouteName="SplashScreen">
     ...
    </Stack.Navigator>
    
    <Button /> // add your component here. It will be visible in all screens
  </NavigationContainer>

使用 React-Navigation 在所有屏幕中显示组件 - React Native

Show a component in all screens with React-Navigation - React Native

android

ios

react-native

react-navigation