React Native——Tab Navigator 示例答案

【问题标题】：React Native — Tab Navigator exampleReact Native——Tab Navigator 示例
【发布时间】：2017-06-12 05:03:53
【问题描述】：

我是 react native 开发的新手。我想在 react native 中使用堆栈导航器实现 tabbar。Tabbar 显示正确。虽然点击设置屏幕“回家”按钮不导航到国家屏幕。它看起来很简单，但因为我是新手，所以我没有太多想法。

index.ios.js

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

import MNavigator from './Components/MNavigator';

AppRegistry.registerComponent('*****', () => MNavigator);

MNavigator.js

import React, { Component } from 'react';
import {
   Navigator,
 } from 'react-native';

import {
TabNavigator,
} from 'react-navigation';

import { StackNavigator } from 'react-navigation';
import ArticleList from './ArticleList';
import SettingsScreen from './SettingsScreen';

export const MNavigator = TabNavigator({
ArticleList: {screen: ArticleList},
SettingsScreen: {screen: SettingsScreen},

})

export default MNavigator;

SettingsScreen.js

import React, { Component } from 'react';

import {
Image,
Text,
Button,
View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import CountryScreen from './CountryScreen';

class SettingsScreen extends Component {
  static navigationOptions = {
tabBarLabel: 'Settings',
// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
  <Image
    source={require('./img/like.png')}
    style={[ {tintColor: tintColor}]}
  />
  ),
 };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, This is splash</Text>
        <Button
          onPress={() => this.props.navigation.navigate('CountryScreen', { user: 'Lucy' })}
          title="Go Home"
        />
      </View>
    );
  }
}
export default SettingsScreen;

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

你可以这样实现它... 您只需要将标签栏作为页面导入。 MyTabNav.js

const MyTabNav = TabNavigator({
    Home: { screen: Home },
    Profile: { screen: Profile },
    Others: { screen: Others },
});

export default MainScreenNavigator;

MyAppNav.js

export const AppNav = StackNavigator({
    Splash: { screen: Splash },
    Home: { screen: MyTabNav },//<-Nested Navigation
    Login: { screen: Login },
    Register: { screen: Register }
});

export default AppNav;

index.ios.js

import MyAppNav from './MyAppNav.js'
AppRegistry.registerComponent('VideoVoiceChanger', () => MyAppNav);

【讨论】：