react navigation是社區(qū)實(shí)現(xiàn)的react native界面跳轉(zhuǎn)導(dǎo)航庫(kù)，也是目前react native中最多人使用的路由開(kāi)源庫(kù)。一般來(lái)說(shuō)react native項(xiàng)目都需要引入該庫(kù)來(lái)進(jìn)行開(kāi)發(fā)，以下基于react navigation 3.x版本。

安裝

expo sdk中使用

yarn add react-navigation

非expo sdk中使用

yarn add react-navigation
yarn add react-native-gesture-handler # 安裝支持庫(kù)
react-native link react-native-gesture-handler # link到native

使用

棧路由

棧路由與瀏覽器中導(dǎo)航是基本一致的，會(huì)將后續(xù)路由壓入棧中，在返回時(shí)彈出。
A -> push -> B -> push -> C
C -> pop -> B -> pop -> A

interface IProps {
  // 聲明路由器類(lèi)型
  navigation: NavigationScreenProp<any, any>;
}

class One extend React.Component<IProps> {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center',  justifyContent: 'center'}}>
        <TouchableOpacity onPress={() => this.props.navigation.push('Two')}>
          <Text>Two</Two>
        </TouchableOpacity>
      </View>
    );
  }
}

class Two extend React.Component<IProps> {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center',  justifyContent: 'center'}}>
        <TouchableOpacity onPress={() => this.props.navigation.pop()}>
          <Text>Back</Two>
        </TouchableOpacity>
      </View>
    );
  }
}

const Navigator = createStackNavigator({
  One: {screen: One},
  Two: {screen: Two}
}, {
  initialRouteName: 'One'
});

tab路由

與微信獲取qq類(lèi)似，下面有幾個(gè)按鈕，然后上面是頁(yè)面

class TabBarComponent extends React.Component<IProps> {
  render() {
    return (
      <View style={{flex: 0.1}}>
        <View style={{flexDirection: 'row', justifyContent: 'space-around}}>
           <TouchableOpacity onPress={() => this.props.navigation.navigate('One')}>
             <Text>One</Text>
           </TouchableOpacity>
           <TouchableOpacity onPress={() => this.props.navigation.navigate('Two')}>
              <Text>Two</Text>
           </TouchableOpacity>
        </View>
      </View>
    );
  }
}

// 創(chuàng)建tab路由
const TabNav = createBottomTabNavigator({
  One: One,
  Two: Two
}, {
  initialRouteName: 'One',
  // tab組件
  tabBarComponent: ({navigation}) => <TabBarComponent navigation={navigation} />
});

// tab路由加入棧路由
const Navigator = createStackNavigator({
  Tab: {screen: TabNav}
}, {
  initialRouteName: 'Tab'
});

參數(shù)

react navigation中支持在兩個(gè)頁(yè)面之間傳遞各種類(lèi)型的參數(shù)，包括函數(shù)。

參數(shù)類(lèi)型聲明

interface IParams {
  id: number;
}

interface IProps {
  navigation: NavigationScreenProp<any, IParams>;
}

參數(shù)傳遞

// push(name, params);
this.props.navigation.push(Tow, {id: 1}};

參數(shù)獲取

// 自動(dòng)推斷為number類(lèi)型
const id = this.props.navigation.getParam('id');

跳轉(zhuǎn)

路由跳轉(zhuǎn)

this.props.navigation.navigate(name);

路由push

this.props.navigation.push(name);

路由pop

this.props.navigation.pop();

路由多級(jí)返回

this.props.navigation.pop(count);

清空路由

一般用于退出登陸

import {NavigationActions,  StackActions} from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Login' })],
});

resetAction();

事件

react navigation支持事件的監(jiān)聽(tīng)，包括willFocus, didFocus, willBlur, didBlur，以下介紹其中的didFocus和willBlur兩個(gè)較為常用的事件。

didFocus

當(dāng)前視圖被顯示時(shí)調(diào)用

private didFocus?: NavigationEventSubscription;
componentDidMount() {
  this.didFocus = this.props.navigation.addListener(
      'didFocus',
      payload => {
        console.log('顯示');
      }
    );
}
componentWillUnmount() {
  // 最后移除監(jiān)聽(tīng)
  this.didFocus && this.didFocus.remove();
}

willBlur

當(dāng)前視圖即將隱藏或移除時(shí)調(diào)用

this.willBlur = this.props.navigation.addListener(
      'willBlur',
      payload => {
        console.log('移除');
      }
    );

更多用法和api請(qǐng)查看官方文檔，如有問(wèn)題請(qǐng)留言咨詢(xún)。