React native 反应自然—；选项卡导航器示例

我是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);

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;

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;

MNavigator.js

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

import MNavigator from './Components/MNavigator';

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

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;

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;

设置屏幕.js

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

import MNavigator from './Components/MNavigator';

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

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;

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;

import React，{Component}来自'React'；
进口{
形象
文本
按钮
看法
}从“反应本机”；
从“react navigation”导入{StackNavigator}；
从“/CountryScreen”导入CountryScreen；
类设置屏幕扩展组件{
静态导航选项={
tabBarLabel:“设置”，
//注意：默认情况下，图标仅在iOS上显示。请搜索下面的showIcon选项。
tabBarIcon:（{tintColor}）=>(
),
};
render（）{
const{navigate}=this.props.navigation；
返回(
你好，我是splash
this.props.navigation.navigate（'CountryScreen'，{user:'Lucy'}）}
title=“回家”
/>
);
}
}
导出默认设置屏幕；

您可以这样实现它。。。 您只需要将选项卡栏作为页面导入。 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;