React Native — Tab Navigator example

问题

I'm new in react native development.I want to implement tabbar with stack navigator in react native.Tabbar shows proper. While tap on settingsscreen "Go Home" button not navigating to country screen.Its seems simple but since i am new i dont have much idea.

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;

回答1:

You can achieve it like this... you need to import your tabbar as a page only. 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);

来源：https://stackoverflow.com/questions/44491714/react-native-tab-navigator-example

标签

react-native

react-navigation