navigation_tab导航栏

一、底部导航初步

import React from \'react\';
import { Text, View } from \'react-native\';
import { createBottomTabNavigator } from \'react-navigation\';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: \'center\', alignItems: \'center\' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: \'center\', alignItems: \'center\' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

export default createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

　　

二、定义导航栏

// You can import Ionicons from @expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from \'react-native-vector-icons/Ionicons\';
import { createBottomTabNavigator } from \'react-navigation\';

export default createBottomTabNavigator(
  {
    Home: HomeScreen,
    Settings: SettingsScreen,
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === \'Home\') {
          iconName = `ios-information-circle${focused ? \'\' : \'-outline\'}`;
        } else if (routeName === \'Settings\') {
          iconName = `ios-options${focused ? \'\' : \'-outline\'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: \'tomato\',
      inactiveTintColor: \'gray\',
    },
  }
);

　

三、在不同tab见跳转类似于在不同screen之间跳转，使用navigation.navigate

四、为每个tab建立一个堆栈浏览器

import {
  createBottomTabNavigator,
  createStackNavigator,
} from \'react-navigation\';

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: \'center\', alignItems: \'center\' }}>
        <Text>Details!</Text>
      </View>
    );
  }
}

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: \'center\', alignItems: \'center\' }}>
        {/* other code from before here */}
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate(\'Details\')}
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: \'center\', alignItems: \'center\' }}>
        {/* other code from before here */}
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate(\'Details\')}
        />
      </View>
    );
  }
}

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  Details: DetailsScreen,
});

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
  Details: DetailsScreen,
});

export default createBottomTabNavigator(
  {
    Home: HomeStack,
    Settings: SettingsStack,
  },
  {
    /* Other configuration remains unchanged */
  }
);