这篇文章你将会学习到：

• 如何安装路由 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.jsimport 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.jsimport 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.jsimport React, { PureComponent } from 'react';import AppNavigator from './navigator';export default class App extends PureComponent {
    render() {        return <AppNavigator />;
    }
}

// index.jsimport {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.jsimport 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.jsimport 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

  • headerTitleAllowFontScaling

  • headerStyle

  • headerLeft

  • headerRight

  • headerMode

  • initialRouteName

  • mode

  • cardStyle

  • navigationOptions

• NavigationRouteConfigMap

  • title

  • left

  • right

  • screen

  • navigationOptions

TabNavigator

• 创建 TabNavigator: NavigationContainer

  • 创建 NavigationRouteConfigMap

  • 创建 BottomTabNavigatorConfig

• 在 StackNavigator 添加 TabNavigator

// tab.jsimport 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