Question

我将react-navigation与我的React Native应用一起使用。我已经创建了一个底部标签导航器，并想在屏幕上使用内置标题。但是标题没有显示。没有错误或警告。

app.js：

const TabStack = createBottomTabNavigator({
  Upload: { 
    screen: upload,
    navigationOption: {
      headerTitle: "Upload"
    }
  },
  Profile: { 
    screen: profile,
    navigationOption: {
      headerTitle: "Profile"
    }
  }
});

const MainStack = createSwitchNavigator(
  {
    Home: { screen: TabStack }
  },
  {
    initialRouteName: 'Home'
  }
);

upload.js

class upload extends React.Component {
    static navigationOptions = {
        title: 'Upload'
    };

    constructor(props) {
        super(props);

    ...

我知道可能不需要在组件中声明navigationOptions，因为它已经在app.js中声明了，但这只是为了表明这两种方法都行不通。

我该如何解决？

Answer 1

     MyTabs = tabNavigator
     <Stack.Navigator>
     <Stack.Screen name="MyAccount" component={MyTabs} />
    </Stack.Navigator>

1）使用内置导航头附带的堆栈导航器中的tabNavigator 功能。 2）堆栈导航器没有内置标头

Answer 2

TabNavigator不随Header一起提供。常见的情况是让您TabNavigator为您的 root 导航器，并将每个标签设为StackNavigator ...，那么您将获得标头，因为它是StackNavigator的一部分默认情况下。

Answer 3

React Navigation文档也suggests adding a stack navigation for each tab.

bottomTabNavigation屏幕没有没有标题，但是普通的StackNavigator有标题，因此您可以使底部的标签打开普通的StackNavigator。

思考Instagram：
您打开主页选项卡，然后输入个人资料。当您返回时，您仍然希望位于主页选项卡中。所以它是选项卡导航中的堆栈导航：）

@foreach($places as $place)
    <option value={{ $place->id}}>Place: {{$place->place}}, Row: {{ $place->row }}>
@endforeach

然后，StackNavigator屏幕将基于屏幕名称添加标题。您还可以定义自定义标题标题：

    document.fonts.ready.then(function () {
  var offsetHeight = box.offsetHeight;
  var clientHeight = box.clientHeight;
dim.innerHTML = "clientHeight: " + clientHeight + ", " + "offsetHeight: " + offsetHeight;

Answer 4

这对我有用。像下面这样尝试

    const TabStack = createBottomTabNavigator({
          Upload: { 
            screen: createStackNavigator({Home: HomeScreen}),,
            navigationOption: {
              headerTitle: "Upload"
            }
          },
          Profile: { 
            screen: profile,
            navigationOption: {`enter code here`
              headerTitle: "Profile"
            }
          }
        });

反应导航：使用底部标签导航器时标题不显示

4 个答案: