Question

我是反应原生开发的新手。我想在反应原生中使用堆栈导航器实现tabbar.Tabbar显示正确。点击设置屏幕＆＃34;回家＆＃34;按钮没有导航到国家屏幕。它看起来很简单，但由于我是新手，我没有太多的想法。

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示例

1 个答案: