React Native - Tab Navigator例

Question

私は反応ネイティブ開発で新しくなりました。ネイティブタババーのスタックナビゲーターでタブバーを実装したいと思います。設定画面をタップしている間に "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);