Question

我在这里关注本教程：https://www.youtube.com/watch?v=cgg1HidN4mQ&list=PLy9JCsy2u97lNUL3e3R-uoMQv5GDvf22T

教程中的人正在使用TabNavigator，但这不再是正确的方法，所以我改用createBottomNavigator。

这是我的MainScreen组件代码

import React from 'react';
import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import ProfileTab from './AppTabNavigator/ProfileTab'
import LikesTab from './AppTabNavigator/LikesTab'
import SearchTab from './AppTabNavigator/SearchTab'
import AddMediaTab from './AppTabNavigator/AddMediaTab'
import HomeTab from './AppTabNavigator/HomeTab'

import { TabNavigator } from 'react-navigation'
import { createBottomTabNavigator } from 'react-navigation'

import { Icon } from 'native-base'


class MainScreen extends React.Component {

    static navigationOptions = {
        headerLeft: <Icon name="ios-camera-outline" style={{paddingLeft: 10}} />,
        title: "Instagram",
        headerRight: <Icon name="ios-send-outline" style={{paddingRight: 10}}/>
    }
}

// export default MainScreen;
export default createBottomTabNavigator({
    HomeTab: HomeTab,
    SearchTab: SearchTab,
    AddMediaTab: AddMediaTab,
    LikesTab: LikesTab,
    ProfileTab: ProfileTab
})

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

我的问题是导航选项不起作用。当我启动应用程序时，它们不显示。我可以猜测这与createBottomNavigator的使用有关吗？

Answer 1

我在expo.io上做了点心，以做我认为您想做的事情。尚不清楚，因为您试图为标题设置左右图标，但是标签导航器没有标题。

在此示例中，我将堆栈导航器嵌套在设置屏幕上，您可以看到我如何使用单个组件的静态导航选项来覆盖整个堆栈导航器的“全局”导航选项。

这里是snack。

如果无论如何都希望每个选项卡上的标头，只需反转嵌套，然后将选项卡导航器放在堆栈导航器中即可。这也是零食。

https://snack.expo.io/rk3hoalVm

navigationoptions在React Native中不起作用

1 个答案: