路由导航

中的路由是通过React-Navigation来实现的

React中通过React-Router实现路由
RN0.44之前 React-Navigation在核心中维护，之后是独立维护
官网 https://reactnavigation.org/

安装

yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

安卓链接 rn0.60之后的无需链接

ios下需要手动链接路由（npx pod-install ios）

添加头部组件
- 将如下代码放到应用的头部例如放到index.js或 App.js文件的头部
- import 'react-native-gesture-handler'
添加导航容器
- 我们需要在入口文件中，把整个应用包裹在导航容器中
- NavigationContainer 中例如在index.js或 App.js文件中

Stack导航

rn中默认没有类似浏览器的history对象
在rn中跳转之前，先将路由声明在Stack中
安装
- yarn add @react-navigation/stack
使用
- import {createStackNavigator} from '@react-navigation/stack'
- const Stack = createStackNavigator();

Navigator属性

initialRouteName
- 初始化路由，即默认加载的路由
headerMode
- float:ios头部效果
- screen:Android头部效果
- none 不显示头部
screenOptions

Screen属性

options

title
headerTitleStyle
headerStyle
headerLeft
headerRight
headerTintColor

import * as React from 'react';
import { Text, Button, View, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'


function HomeScreen({ navigation }) {
  return (
    <Button onPress={() => navigation.navigate('Details')} title='跳转到详情页' />
  )
}
function DetailsScreen({ navigation }) {
  return (
    <View style={[styles.container]}>
      <Button onPress={() => navigation.navigate('Home')} title='回首页' />

    </View>
  )
}
const Stack = createStackNavigator()
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='DEtails'>
        <Stack.Screen name='Home' component={HomeScreen} ></Stack.Screen>
        <Stack.Screen name="Details" component={DetailsScreen} ></Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  }
})

BottomTab导航

底部选项卡效果

安装
- yarn add @react-navigation/bottom-tabs
使用
- import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
- const Tab = createBottomTabNavigator();

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { Button, View, StyleSheet } from 'react-native'

const Tab = createBottomTabNavigator();


function HomeScreen({ navigation }) {
  return (
    <Button onPress={() => navigation.navigate('Details')} title='跳转到详情页' />
  )
}
function SettingsScreen({ navigation }) {
  return (
    <View style={[styles.container]}>
      <Button onPress={() => navigation.navigate('Home')} title='回首页' />
    </View>
  )
}

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray'
        }}
        screenOptions={({ route }) => (
          {
            tabBarIcon: ({ focused, color, size }) => {
              return <Button title='Hello'></Button>
            }
          })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  }
})

export default App

React-native-vector-icons 图标库

安装
- npm install --save react-native-vector-icons
将图标链接到应用
- https://github.com/oblador/react-native-vector-icons
使用
- 需要具体的图标库官网查看
- 例如 Ionicons FontAwesome AntDesign

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { Button, View, StyleSheet } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'

const Tab = createBottomTabNavigator();


function HomeScreen({ navigation }) {
  return (
    <Button onPress={() => navigation.navigate('Details')} title='跳转到详情页' />
  )
}
function SettingsScreen({ navigation }) {
  return (
    <View style={[styles.container]}>
      <Button onPress={() => navigation.navigate('Home')} title='回首页' />
    </View>
  )
}

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray'
        }}
        screenOptions={({ route }) => (
          {
            tabBarIcon: ({ focused, color, size }) => {
              // focused 当前菜单是否选中
              return <Ionicons title='add-circle'></Button>
            }
          })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  }
})

export default App