反应本机 - Tab Navigator示例

Question

我是新的反应本机开发。我想实现tabbar与堆栈导航反应native.Tabbar显示正确。当点击设置屏幕“回家”按钮不导航到国家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

可以实现它像这样... 你需要导入你的tabbar只作为页面。 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);