React 原生底部导航答案

【问题标题】：React native bottom navigationReact 原生底部导航
【发布时间】：2018-07-12 15:07:52
【问题描述】：

我有 2 个屏幕。第一个是登录屏幕（没有标题），其中我有“createStackNavigation”，第二个是主屏幕，我希望在这两个标签中的每一个中都有带有标题的底部导航（2 个标签）。我做了底部导航，但自定义标题根本不起作用......它只是基本标题。任何人都可以有一些基本的例子吗？或者可以帮我做教程吗？

谢谢

【问题讨论】：

请给我们一些代码。这是参与问题的最佳方式（也可以稍微格式化您的问题，我无法真正理解您的要求）
我明天会发布代码。但我也对 react-native 感到困惑......你有这个“问题”的例子吗？

标签： javascript react-native-android react-navigation

【解决方案1】：

您通过navigationOptions 实现了一个自定义标题。这可以通过两种方式完成：

在 createStackNavigation 中：

const navigator = createStackNavigation({
  Screen1: {
    screen: Screen1,
    navigationOptions: {
      header: <CustomHeader />
    }
});

在屏幕组件本身：

export default class Screen1 extends React.Component {
  static navigationOptions = () => ({
    header: <CustomHeader />,
  })
...

【讨论】：

你需要两个：createStackNavigator 和 createBottomNavigation？我也做了两种方式，但我只设法从登录屏幕中删除了标题。
它们有不同的用途：对于您的情况，登录屏幕似乎是全屏，而带有底部导航的主屏幕将是另一个。因此，您需要一个 StackNavigation 来在这两者之间导航，并且需要一个 BottomNavigation “内部” mainScreen 来在选项卡之间导航。我在里面引用是因为您实际上不需要 MainScreen 的组件，而是使用两个选项卡创建一个 BottomNavigation，并在 StackNavigation 中使用此 BottomNavigation，以便能够从登录屏幕导航到它跨度>
那我不明白你的问题。在 navigationOptions 中使用自定义标题不起作用？
这是我在 app.js 中的代码 const RootStack = createStackNavigator( { Home: { screen: Login, navigationOptions: ({ navigation }) => ({ header: null, }), }, Main: MainScreen, }, { initialRouteName: 'Home', headerMode: 'screen', /*navigationOptions: { headerStyle: { backgroundColor: '#269BB9', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }, */ } );

【解决方案2】：

这是我的 app.js 代码：

const RootStack = createStackNavigator(
{
   Home: {
    screen: Login,

   navigationOptions: ({ navigation }) => ({
      header: null,
   }),

   },
  Main: MainScreen,

 },
{
 initialRouteName: 'Home',
 headerMode: 'screen',

}
);

这是我的主屏幕代码：

export default createBottomTabNavigator(
{
  Domov: {
    screen: HomeScreen,

},
  Dnevnik: Diary,
},
{
  navigationOptions: ({ navigation }) => ({
   tabBarIcon: ({ focused, tintColor }) => {
    const { routeName } = navigation.state;
    let iconName;
    if (routeName === 'Domov') {
      //iconName = `home${focused ? '' : '-outline'}`;
      iconName='home';
    } else if (routeName === 'Dnevnik') {
      //iconName = `ios-calendar${focused ? '' : '-outline'}`;
      iconName='ios-calendar';
    } 


    return (
        <Icon name={iconName} style={{fontSize: 20, color: '#FFF'}} />
      );
  },

 }),
  tabBarPosition: 'bottom',
  tabBarOptions: {
  activeTintColor: 'white',
  showLabel: false,
  inactiveTintColor: '#4C2601',
  style: {
    backgroundColor: '#033D51',
  },
},

});

【讨论】：