Question

我有 2个屏幕。第一个是登录屏幕（不带标题），其中我有“ createStackNavigation”，第二个是主屏幕，我想要底部导航（2个选项卡），在这两个选项卡中的每个页面都有标题。我做了底部导航，但是自定义标头根本不起作用...它只是基本标头。任何人都可以有一些基本的例子吗？还是可以帮助我进行教程？

谢谢

Answer 1

您将获得一个自定义标头，将其传递给navigationOptions。这可以通过两种方式完成：

在createStackNavigation中：

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

在屏幕组件本身中：

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

Answer 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',
  },
},

});

反应本机底部导航

2 个答案: