react-navigation导航入门

A. 导入相关库

a. 安装react-navigation库

npm install react-navigation

b. 安装react-native-gesture-handler库

npm install react-native-gesture-handler

c. 安装react-native-reanimated库

npm install react-native-reanimated

另：要求react-native在0.60之上

B. iOS需要pod install

安装react-native-gesture-handler

C. 一个简单的Demo

import React from 'react';

import { View, Text } from 'react-native';

import { createStackNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {

  render() {

    return (

     

        Home Screen

     

    );

  }

}

class DetailsScreen extends React.Component {

  render() {

    return (

     

        Details Screen

     

    );

  }

}

const RootStack = createStackNavigator(

  {

    Home: HomeScreen,

    Details: DetailsScreen,

  },

  {

    initialRouteName: 'Home',

  }

);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {

  render() {

    return ;

  }

}

D. 页面切换---跳转到新的页面

class HomeScreen extends React.Component {

  render() {

    return (

     

        Home Screen

        this.props.navigation.navigate('Details')} />

     

    );

  }

}

E.页面切换---多次导航到同一路由

// 从DetailsScreen继续进入DetailsScreen页面，如果使用navigate啥也不会做，因为此时已经在Details这个路由上了，如果要继续添加这个页面，则需要是用push方法

class DetailsScreen extends React.Component {

  render() {

    return (

     

        Details Screen

       

this.props.navigation.push('Details')} />

     

    );

  }

}