这篇文章你将会学习到:
- 如何安装路由
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