React Native——Tab Navigator 示例

Question

我是 React Native 的新手 development.I 想在 React 中使用堆栈导航器实现标签栏 native.Tabbar 显示正确。虽然点击设置屏幕 "Go Home" 按钮不导航到国家 screen.Its 看起来很简单但是因为我是新手所以我不太清楚。

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;

Answer 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);

React Native——Tab Navigator 示例

React Native — Tab Navigator example

react-native

react-navigation