这篇文章你将会学习到：

• 如何安装路由 react-navigation
• 如何使用路由
  • 创建 StackNavigator
  • 页面间的转场和传递参数
  • 相关配置
  • TabNavigator
• 其他通用组件

如何安装路由 react-navigation

• yarn add react-navigation
• Or npm install --save react-navigation

如何使用路由

创建 StackNavigator

• 创建 Screen(View) 组件: Home
• 创建 StackNavigator: NavigationContainer
  • 导入 createStackNavigator
  • 创建 NavigationRouteConfigMap
  • 创建 StackNavigatorConfig
• 创建 App(React.Component)
  • 引用 Navigator
  • 渲染 StackNavigator

// home.js
import React from 'react';
import { View, Text } from 'react-native';

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

// navigator.js
import React from 'react';
import { createStackNavigator } from 'react-navigation';
import Home from './home';

const NavigationRouteConfigMap = {
    Home: {
        screen: Home,
        navigationOptions: {
            header: null,
            gesturesEnabled: false,
        },
    },
};

const StackNavigatorConfig = {
    initialRouteName: 'Home',
};

export default createStackNavigator(NavigationRouteConfigMap, StackNavigatorConfig);

// app.js
import React, { PureComponent } from 'react';
import AppNavigator from './navigator';

export default class App extends PureComponent {
    render() {
        return <AppNavigator />;
    }
}

// index.js
import {AppRegistry} from 'react-native';
import App from './src/app';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

页面间的转场和传递参数

• 创建 Screen(View) 组件: Demo
• 在页面上增加 Navigator
  • this.props.navigation.navigate('Demo', { test: 'hello'})
  • this.props.navigation.state.params

// demo.js
import React from 'react';
import { View, Text } from 'react-native';

export default class DemoScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Demo Screen</Text>
            </View>
        );
    }
}

// navigator.js
//...

const NavigationRouteConfigMap = {
    //...
    Demo: {
        screen: Demo,
        navigationOptions: {
            title: 'Demo'
        },
    },
};

//...

// home.js
import React from 'react';
import { View, Text, Button } from 'react-native';

export default class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button 
                    title="Go to Demo"
                    onPress={() => this.props.navigation.navigate('Demo', { test: 'hello' })}
                >
                </Button>
            </View>
        );
    }
}

相关配置

TODO

TabNavigator

• StackNavigatorConfig
  • headerMode
  • initialRouteName
  • mode
  • cardStyle
  • navigationOptions
    • headerTitleAllowFontScaling
    • headerStyle
    • headerLeft
    • headerRight
• NavigationRouteConfigMap
  • screen
  • navigationOptions
    • title
    • left
    • right

TabNavigator

• 创建 TabNavigator: NavigationContainer
  • 创建 NavigationRouteConfigMap
  • 创建 BottomTabNavigatorConfig
• 在 StackNavigator 添加 TabNavigator

// tab.js
import React from 'react';
import { createBottomTabNavigator } from 'react-navigation';
import Home from './home';
import Demo2 from './demo2';

const NavigatorTab = {
    Home: {
        screen: Home,
        navigationOptions: {
            tabBarLabel: 'Home',
            showIcon: true,
        },
    },
    Demo2: {
        screen: Demo2,
        navigationOptions: {
            tabBarLabel: 'Demo',
            showIcon: true,
        },
    },
};

const TabOptions = {
    animationEnabled: true,
};

export default createBottomTabNavigator(NavigatorTab, TabOptions);

// navigator.js
// ...

const NavigationRouteConfigMap = {
    // ...
    Tab: {
        screen: Tab,
        navigationOptions: {
            header: null,
            gesturesEnabled: false,
        },
    }
};

const StackNavigatorConfig = {
    initialRouteName: 'Tab',
};

export default createStackNavigator(NavigationRouteConfigMap, StackNavigatorConfig);

其他通用组件

• 内置组件
  • Text, Button, View ...
  • StatusBar
  • RefreshControl
  • FlatList
• 第三方组件
  • react-native-i18n
  • react-native-qrcode
  • react-native-splash-screen
  • react-native-svg-icon
  • react-native-svg
  • react-native-vector-icons
  • react-native-device-info
  • react-native-camera
  • react-native-swiper
  • react-native-root-toast
  • awesome-react-native