React Navigation
前置条件——
1.开发平台:Windows10, VS Code
2.目标平台:Android
3.已经创建好一个可以运行的项目:
版本号:“react-native”: “0.64.2”,
根据官方文档完成以下操作:
1.配置开发环境
2.创建AwesomeProject项目文件
配置依赖
版本号:“react-navigation”: "^4.4.4"
安装react-navigation
npm install react-navigation
将依赖项安装到React Native项目中
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
接下来,我们需要链接这些库。步骤取决于你的React Native版本:
React Native版本0.60及以上,链接是自动的,而本次项目React Native 的版本为0.64,因此无需额外操作;
0.59及以下,则需要手动,具体操作前往官网查看。
安装react-navigation-stack:
npm install react-navigation-stack @react-native-community/masked-view react-native-safe-area-context
配置jetifier来支持使用androidx的依赖:
npm install --save-dev jetifier
将其添加到package.json中的postinstall脚本中:
"scripts": {
"postinstall": "jetifier -r"
}
运行postinstall脚本:
npm run postinstall
为了完成Android的react-native-gesture-handler的安装,对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);
+ }
+ };
+ }
}
然后在入口文件的顶部添加以下内容,比如index.js或App.js:
import 'react-native-gesture-handler';
官方Demo目录结构介绍
目录 | 作用 |
---|---|
android目录 | android原生代码,使用Android Studio则打开此目录即可,打开整个AwesomeProject目录会报错 |
ios目录 | ios原生代码,使用XCode则打开此目录即可 |
node_modules | 基于node文件依赖产生的相关依赖和第三方lib |
index.js | 配置入口文件 |
App.js | 入口 |
package.json | 项目基本信息以及依赖信息 |
- 其他文件在此不作介绍,暂无改动
改造后的目录结构
主要新增src目录,子目录有config和pages目录:
config下主要存放配置文件,如路由配置文件route:
AppNavigator.js-页面跳转配置文件
BottomTabNavigator.js-底部导航栏配置文件(下期讲)
pages下主要存放页面文件,在此先添加Home/home页和Tools页:
每个页面下存放三个文件,index.js,style,和view:
index.js-js操作文件
style-样式文件
view-HTML文件
1.页面导航
1.App.js
import React from 'react';
import AppContainer from './src/config/route/AppNavigator';
export default class App extends React.Component {
render() {
// 渲染容器内的页面
return <AppContainer />;
}
}
将所有官方Demo的代码注释或者删除,放入以上代码
解析:
代码第二行,目的是导入route中封装好的组件,并在App中渲染出来
2.AppNavigator.js
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from "react-navigation-stack";
import MyHome from '../../pages/Home/home';
import MyTools from "../../pages/Tools/index";
// 创建路由堆栈
const AppNavigator = createStackNavigator (
{
Home: MyHome,
Tools: MyTools,
},
{
initialRouteName: 'Home',
}
);
// 创建容器
export default createAppContainer(AppNavigator);
解析:
第一行,导入创建App容器的方法
第二行,导入创建导航堆栈的方法
第三、四行,导入页面组件
第七行,用变量AppNavigator接收创建好的导航堆栈
initialRouteName为重定向初始页面
最后一行,将导航堆栈作为参数传递到创建App容器的方法中,然后导出为组件
3.Home
此处以Home页面为例
1.index.js
import React from 'react';
import view from './view';
export default class MyHome extends React.Component {
render() {
return (view(this.props))
}
}
在本文件中,写js操作
解析:
第二行,导入view组件
第六行,渲染view组件,并传入MyHome的props
2.view.js
import React from 'react';
import { Button, Text, View } from 'react-native';
import styles from './style';
export default props => (
<View style={styles.container}>
<Text style={{ fontSize: 36 }}>Home</Text>
<Button
title="选择工具"
// 路由跳转
onPress={() => props.navigation.navigate("Tools")}
/>
</View>
);
在本文件中,写页面HTML
解析:
第三行,导入自定义组件styles
第六行,使用styles组件中自定义的container样式
第十一行,页面跳转
3.style.js
import { StyleSheet } from "react-native";
export default styles = StyleSheet.create({
container: {
flex: 1,
height: '100%',
backgroundColor: '#EBEBEB',
}
});
至此,一个最最最简单的页面导航完成了,底部导航栏下期再写,码累了。俺只是一个刚毕业的新人开发,这是俺第一回写文章,如果有不对的地方请多多指教,如果对你有帮助那就再好不过了,我们下期再见。