Question

我正在尝试向具有基本功能（菜单按钮和后退按钮）的屏幕（所有屏幕，similar to this example）添加恒定的页眉栏，但是我很难找到一种方法在使用createBottomTabNavigator时使用。我什么都没说这是不可能的，所以如果我犯了一个设计错误，请告诉我。

这是我最小的foobar示例（运行）：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';


class ScreenA extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        screenName: 'Screen A'
      }
    }

    render() {
      return (
        <View 
          style={styles.container}
        >
          <Text>{this.state.screenName}</Text>
        </View>
      );
    }
};

class ScreenB extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        screenName: 'Screen B'
      }
    }

    render() {
      return (
        <View 
          style={styles.container}
        >
          <Text>{this.state.screenName}</Text>
        </View>
      );
    }
};


const BottomTabNav = createBottomTabNavigator(
  {
    ScreenA: {
      screen: ScreenA,
      navigationOptions: {
        title: '',
        tabBarIcon: ({ focused, tintColor }) => {
          return <Ionicons
                    name={ focused ? 'ios-card' : 'ios-card-outline' }
                    size={30}
                    style={{ marginTop: 6 }}
                 />;
        },
      }
    },
    ScreenB: {
      screen: ScreenB, 
      navigationOptions: {
        title: '',
        tabBarIcon: ({ focused, tintColor }) => {
          return <Ionicons
                    name={ focused ? 'ios-chatbubbles' : 'ios-chatbubbles-outline' }
                    size={30}
                    style={{ marginTop: 6 }}
                 />;
        },
      },
    }
  },
  {
    initialRouteName: 'ScreenA',
  }
);


export default class App extends React.Component {
  render() {
    return (
      <BottomTabNav />
    );
  }
};


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

很抱歉，不包含Snack链接，但在尝试构建演示时遇到依赖项问题。

Answer 1

您需要使屏幕成为堆栈导航器，然后可以将其添加到选项卡导航器中。 “ defaultNavigationOptions”是标头的navigationOptions，代码段中的navigationOptions对应于BottomTabNavigator选项。

您可以在此处了解更多信息：https://reactnavigation.org/docs/en/navigation-options-resolution.html

const StackA = createStackNavigator({ ScreenA },
{
  defaultNavigationOptions: (navigationOptions),
  navigationOptions: {
    tabBarLabel: 'Screen A',
  },
});

const StackB = createStackNavigator({ScreenA},
{
  defaultNavigationOptions: (navigationOptions),
  navigationOptions: {
    tabBarLabel: 'Screen B',
  },
});

const tabNavigator = createBottomTabNavigator({StackA, StackB});

Answer 2

只有createStackNavigator有自己的标头，因此您必须在其中包装任何内容，根据您的问题，有两个答案，

将createBottomTabNaviagator放在父createStackNavigator中，并访问createBottomTabNavigator子routeName并将其分配给父createStackNavigator标头

const BottomTabNav = createBottomTabNavigator({
  FirstScreen: ScreenA,
  SecondScreen: ScreenB,
});

BottomTabNav.navigationOptions = ({ navigation }) => {
  // By default routeName will come from the BottomTabNav,
  // but here we can access the children screens 
  // and give the parent ParentStack that routeName
  const { routeName } = navigation.state.routes[navigation.state.index];

  // You can do whatever you like here to pick the title based on the route name
  const headerTitle = routeName;

  return {
    headerTitle,
  };
};

const ParentStack = createStackNavigator({
  Home: BottomTabNav,
  AnotherScreen: AnotherScreen,
});

将子屏幕放入createStackNavigator中，以便每个孩子都有自己的标题

const ScreenA = createStackNavigator({
  FirstScreen: ScreenA,
  /* other routes here */
});

const ScreenB = createStackNavigator({
  SecondScreen: ScreenB,
  /* other routes here */
});

const BottomTabNav = createBottomTabNavigator({
  FirstScreen: ScreenA,
  SecondScreen: ScreenB,
});

使用createBottomTabNavigator时如何添加标题栏？

2 个答案: