【React Native 极速指南】进阶篇

这篇文章你将会学习到:

  • 如何安装路由 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 (
            
                Home Screen
            
        );
    }
}
// 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 ;
    }
}
// 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 (
            
                Demo Screen
            
        );
    }
}
// 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 (
            
                Home Screen
                
            
        );
    }
}

相关配置

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

你可能感兴趣的:(【React Native 极速指南】进阶篇)