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

Question

我希望有一个组件，如按钮(或反应-本机行动-按钮准确地)，以显示在每个屏幕上使用反应导航。

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

注意:我不想在每个.js类中导入组件，然后在render中使用它。

在应用程序的每个屏幕中像这样引用->。Floating Action Button Reference

Answer 1

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

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

Answer 2

使用该按钮创建一个默认屏幕。每次要使用该按钮时，都会使用该组件而不是视图来包装所有项目。例如，“DefaultScreen”是您的视图和默认组件。像这样使用它：

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

在这个DefaultScreen中，所有的孩子都是这样的：

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

Answer 3

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