React Native入门篇—react-navigation路由配置
本人学习React Native没有看过任何教学视频，都是按照官网一步步学习的。只研究了Android开发，所以下面的教程都是Android开发教程。
注意：未经允许不可私自转载，违者必究
React Native官方文档：https://reactnative.cn/docs/getting-started/
react-navigation官方网站：https://reactnavigation.org/en/
项目地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git
安装react-navigation
在项目目录下cmd里面运行以下命令：
yarn add react-navigation
yarn add react-native-gesture-handler
//链接所有本机依赖项
react-native link react-native-gesture-handlerAndroid原生配置
下图前面带加号的需要加入到 android\app\src\main\java\com\nativecase（nativecase是项目名称）\MainActivity.java文件：
package com.reactnavigation.example;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "Example";
}
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}react-navigation用法
查看项目目录：https://github.com/zhouwei1994/nativeCase/blob/master/README.md
在src/view文件下创建（项目页面）：
- 创建home文件夹
创建home.js 文件
创建button.js 文件
- 创建my文件夹
创建my.js 文件
- 创建order文件夹
创建order.js 文件
- 创建project文件夹
创建project.js 文件
order.js 文件如下：
import React, { Component } from 'react';
import { ScrollView, StyleSheet, Text, View, Button, Platform } from 'react-native';
const instructions = Platform.select({
ios: '苹果手机才会显示我',
android:
'安卓手机才会显示我',
});
export default class Order extends Component {
render() {
return (
路由方法
{instructions}
);
}
}
const styles = StyleSheet.create({
orderPage: {
backgroundColor: '#f5f5f5',
},
});
home.js 、my.js、project.js全部都是以下文件
import React, { Component } from 'react';
import { ScrollView, StyleSheet, Text, View, Button } from 'react-native';
class Home extends Component {
constructor(props) {
super(props);
}
render() {
return (
react-native页面
);
}
}
export default Home;
const styles = StyleSheet.create({
});
button.js 文件如下：
import React, { Component } from 'react';
import { ScrollView, StyleSheet, Text, View, Button } from 'react-native';
class Button extends Component {
static navigationOptions = {
title: "子页面",
//右边的按钮
headerRight: (
在src/router文件下创建：
- index.js 页面路由配置
- navigator.js 底部导航配置
navigator.js文件如下：
import React, { Component } from 'react';
import { StyleSheet, Image } from 'react-native';
import { createBottomTabNavigator, TabBarBottom } from "react-navigation";
//主导航页面
import Home from './../view/home/home';
import Project from './../view/project/project';
import Order from './../view/order/order';
import My from './../view/my/my';
//主导航设置
export default createBottomTabNavigator(
{
home: {
screen: Home,
navigationOptions: () => ({
//底部导航的文本
tabBarLabel: `首页`,
//底部导航的图标
tabBarIcon: ({ focused }) => {
var imageIcon = require('./../images/tabIcon/ic_home.png');
if (focused) {
imageIcon = require('./../images/tabIcon/ic_home_active.png');
}
return index.js文件如下：
import React, { Component } from 'react';
import { Easing, Animated,Image } from 'react-native';
import {
createStackNavigator,
createAppContainer
} from "react-navigation";
//底部导航配置
import Navigator from './../components/navigator/index';
//页面
import Button from '../view/home/Button';
//页面路由
const routerStack = createStackNavigator({
navigator: {
screen: Navigator,
//主导航页面不显示头部
navigationOptions: {
header: null,
}
},
button: {
screen: Button,
},
}, {
//默认第一次显示首页
initialRouteName: 'navigator',
// 定义渲染和过渡的样式
mode: 'modal',
// 指定标头的呈现方式
headerMode: "screen",
//显示返回图标后的文字
headerBackTitleVisible: false,
cardOverlayEnabled: true,
//标题居中
headerLayoutPreset: "center",
//设置默认数据
defaultNavigationOptions: ({ navigation }) => {
return {
// 设置头部返回图片
headerBackImage:
}
},
//页面跳转动画
transitionConfig: () => ({
transitionSpec: {
duration: 300,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
},
screenInterpolator: sceneProps => {
const {layout, position, scene} = sceneProps;
const {index} = scene;
const Width = layout.initWidth;
//沿X轴平移
const translateX = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [Width, 0, -(Width - 10)],
});
//透明度
const opacity = position.interpolate({
inputRange: [index - 1, index],
outputRange: [0, 1],
});
return {opacity, transform: [{translateX}]};
}
}),
//页面跳转之前
onTransitionStart: () => {
// console.log("页面跳转之前");
},
//页面跳转之后
onTransitionEnd: () => {
// console.log("页面跳转之后");
},
});
export default routerStack; 然后在src/App.js里面如下：
import React, { Component } from 'react';
import { ToastAndroid, BackHandler, StatusBar } from 'react-native';
import { createAppContainer} from "react-navigation";
import routerStack from "./router/index.js";
export default createAppContainer(routerStack);
项目地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git
注意：未经允许不可私自转载，违者必究