react-native导航

StackNavigator

import {NavigationContainer} from '@react-navigation/native';
//  导航容器
import {createStackNavigator} from '@react-navigation/stack';
//  导入创建堆栈导航方法

const Stack = createStackNavigator();

 <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen 
            name="Home" 
            component={Home}
                />
          <Stack.Screen 
            name="Details" 
            component={Details}         
            />
        </Stack.Navigator>
      </NavigationContainer>

TopTabNavigator

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const TopTab = createMaterialTopTabNavigator();
<TopTab.Navigator tabBarOptions={{tabStyle:{width:90},scrollEnabled:true}}>
    <TopTab.Screen                  
    name="全部" initialParams={{id:0}} component={Channel} key={0}/>
      {this.state.types.map(item=>{
        return (<TopTab.Screen name={item.name} key={item.id} initialParams={{id:item.id}} component={Channel}/>)
      })}
</TopTab.Navigator>

navigationOptions

参数:

• title: 导航栏的标题
• header: 导航栏设置对象
  • visible: 导航栏是否显示
  • title: 导航栏的标题, 可以是字符串也可以是个组件
  • backTitle: 左上角的返回键文字, 默认是上一个页面的title
  • right: 导航栏右按钮
  • left: 导航栏左按钮
  • style: 导航栏的style
  • titleStyle: 导航栏的title的style
  • tintColor: 导航栏颜色

<Tab.Screen 
  name="Home" 
  component={TabTop}
  options={{
    tabBarLabel:"首页",
    tabBarIcon:({focused})=>focused?<Image style={styles.icon} source={require("./assets/home-h.png")} />:<Image style={styles.icon} source={require("./assets/home.png")} />
 }}
></Tab.Screen>

BottomTabNavigator

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
 <Tab.Navigator>
    <Tab.Screen component={Movie} name="Movie"></Tab.Screen>
    <Tab.Screen component={Star} name="Star"></Tab.Screen>
    <Tab.Screen component={User} name="User"></Tab.Screen>
</Tab.Navigator>