简述
至于项目都是学习其他人的实战项目,这里不过是做一个学习总结,主要是记录下使用到的包和一些UI工具,以便于参考。
- react-navigation 页面跳转和转场动画
- react-native-svg-uri RN 中使用svg技术
- react-native-tab-navigator 底部导航栏
- react-native-element 一套ui库 内置常用组件
- react-native-vector-icons
- react-native-linear-gradient 渐变容器
- react-native-confirmation-code-field 验证码输入框
- react-native-svg
- iconfont字体图标
- react-native-datepicker 日期选择框
- react-native-amap-geolocation 高德地图组件
- react-native-picker 自定义picker
- react-native-image-crop-picker 图片裁切组件
- jmessage-react-plugin 极光推送 react-native 版本
- react-native-image-header-scroll-view 顶部吸顶效果
- react-native-deck-swiper 类似轮播图的滑动组件
- react-native-image-zoom-viewer 图片缩放组件
- aurora-imui-react-native 通用的即时通讯(IM)UI 库
- react-native-scrollable-tab-view 顶部tab栏
- moment 流行的日期库
- react-native-image-picker 图片选择工具
- mobx mobx-react 状态管理工具
一、初始化创建
1、项目的搭建可以参考RN官网,这里使用的开发环境 Windows Android VsCode 雷电模拟器。
npx react-native init test
2、在运行项目之前先开启模拟器,使用adb 监测设备 具体参考adb
adb device
3、运行项目
npm run android
二、使用的库
react-navigation
页面跳转和转场动画
-
安装
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack @react-navigation/native
-
代码
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, HeaderTitle } from '@react-navigation/stack';
const Stack = createStackNavigator();
render() {
const {initialRouteName}=this.state;
return (
<NavigationContainer>
<Stack.Navigator headerMode="none" initialRouteName={initialRouteName}>
<Stack.Screen name='home' component={MenuBar} />
<Stack.Screen name='login' component={LoginPage} />
</Stack.Navigator>
</NavigationContainer>
)
}
react-native-svg-uri
RN 中使用svg技术
-
下载
yarn add react-native-svg-uri react-native-svg
-
代码
import SvgUri from 'react-native-svg-uri';
render() {
return (
<View>
<SvgUri width="23" height="23" svgXmlData={'<svg t="1568188030646" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7085" width="64" height="64"><path d="M515.3 597.2c-72.6 0-140.8-28.3-192.2-79.6-51.3-51.3-79.6-119.6-79.6-192.2s28.3-140.8 79.6-192.2 119.6-79.6 192.2-79.6 140.8 28.3 192.2 79.6 79.6 119.6 79.6 192.2-28.3 140.8-79.6 192.2c-51.4 51.3-119.6 79.6-192.2 79.6z m0-503.5c-61.9 0-120.1 24.1-163.9 67.9s-67.9 102-67.9 163.9 24.1 120.1 67.9 163.9c43.8 43.8 102 67.9 163.9 67.9 61.9 0 120.1-24.1 163.9-67.9 43.8-43.8 67.9-102 67.9-163.9 0-61.9-24.1-120.1-67.9-163.9-43.8-43.8-102-67.9-163.9-67.9zM994.9 915.6H62.3l3.8-23.3c12.4-75 51.3-143.9 109.6-194 59-50.6 134-78.5 211.3-78.5h283.1c77.3 0 152.3 27.9 211.3 78.5 58.3 50 97.2 118.9 109.6 194l3.9 23.3z m-884.4-40h836.2c-14.4-56.7-46.2-108.2-91.3-146.9-51.7-44.3-117.5-68.7-185.2-68.7H387c-67.7 0-133.5 24.4-185.2 68.8-45.1 38.7-77 90.2-91.3 146.8z" p-id="7086" fill="#999999"></path><path d="M448.1 640L513 841l80-201zM437.7 345c-12.1 0-21.9-9.9-21.9-21.9V269c0-12.1 9.9-21.9 21.9-21.9 12.1 0 21.9 9.9 21.9 21.9v54.1c0.1 12-9.8 21.9-21.9 21.9zM573.2 345c-12.1 0-21.9-9.9-21.9-21.9V269c0-12.1 9.9-21.9 21.9-21.9 12.1 0 21.9 9.9 21.9 21.9v54.1c0.1 12-9.8 21.9-21.9 21.9z" p-id="7087" fill="#999999" ></path></svg>'} />
</View>
);
}
react-native-tab-navigator
底部导航栏
-
下载
yarn add react-native-tab-navigator
react-native-element
一套ui库 内置常用组件
-
下载
需要使用到图标 因此也需要安装
react-native-vector-icons
yarn add react-native-elements react-native-vector-icons
-
引入和使用
import { Icon } from 'react-native-elements' <Icon name='rowing' />
react-native-vector-icons 的其他使用
-
编辑
android/app/build.gradle
-
添加以下配置
project.ext.vectoricons = [ iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy ] apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
-
重启项目
-
添加代码 如
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; const icon = <FontAwesome5 name={'comments'} />;
react-native-linear-gradient
渐变容器
- 下载
yarn add react-native-linear-gradient
- 使用
<LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} colors={['#9b63cd', '#e0708c']} style={styles.linearGradient}>
<Text style={{ ...styles.buttonText, ...this.props.textStyle }}>{this.props.children}</Text>
</LinearGradient>
react-native-confirmation-code-field
验证码输入框
-
下载
yarn add react-native-confirmation-code-field
-
使用
import {CodeField,Cursor} from 'react-native-confirmation-code-field'
<CodeField
value={codeTxt}
onChangeText={this.onCodeChange}
onSubmitEditing={this.onCodeSubmit}
cellCount={6}
rootStyle={styles.codeFiledRoot}
keyboardType="number-pad"
renderCell={({ index, symbol, isFocused }) => (
<Text key={index} style={[styles.cell, isFocused && styles.focusCell]} >{symbol || (isFocused ? <Cursor /> : null)}</Text>
)}
/>
react-native-svg
因为在rn中 使用普通的字体图标是没有多种颜色的如
-
下载依赖
yarn add react-native-svg react-native-svg-uri
-
代码中使用
import SvgUri from 'react-native-svg-uri';
const female='<svg ......';
<SvgUri width="23" height="23" svgXmlData={female} />
iconfont字体图标
-
在字体图标网站上下载 字体
-
然后拷贝 ttf后缀的文件到
android\app\src\main\assets\fonts
中 如果没有assets
文件夹可以新建一个 -
然后 给
Text
标签 设置<Text style={{ fontFamily: "iconfont", color: "red" }} >{'\ue82b'}</Text>
react-native-datepicker
日期选择框
-
安装
yarn add react-native-datepicker
-
引入
import DatePicker from 'react-native-datepicker';
-
使用
<DatePicker
androidMode="spinner"
style={{ width: "100%" }}
date={birthday}
mode="date"
placeholder="设置生日"
format="YYYY-MM-DD"
minDate="1900-01-01"
maxDate={currentDate}
confirmBtnText="确定"
cancelBtnText="取消"
customStyles={{
dateIcon: {
display: "none"
},
dateInput: {
marginLeft: pxToDp(10),
borderWidth: 0,
borderBottomWidth: pxToDp(1.1),
alignItems: "flex-start",
paddingLeft: pxToDp(4)
},
placeholderText: {
fontSize: pxToDp(18),
color: "#afafaf"
}
}}
onDateChange={(birthday) => { this.setState({ birthday }) }}
/>
使用 react-native-amap-geolocation
高德地图组件
分别使用了两个功能,一个是AndroidSDK和一个web服务
-
下载依赖
yarn add react-native-amap-geolocation
-
配置文件
-
编辑
android/settings.gradle
,设置项目路径:+ include ':react-native-amap-geolocation' + project(':react-native-amap-geolocation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-amap-geolocation/lib/android')
-
编辑
android/app/build.gradle
,新增依赖:dependencies { + implementation project(':react-native-amap-geolocation') }
-
编辑
MainApplication.java
:+ import cn.qiuxiang.react.geolocation.AMapGeolocationPackage; public class MainApplication extends Application implements ReactApplication { @Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: + packages.add(new AMapGeolocationPackage()); return packages; } }
-
react-native-picker
自定义picker
-
安装
yarn add react-native-picker
-
代码
import Picker from 'react-native-picker'; Picker.init({ pickerData: CityJson, selectedValue: ["北京", "北京"], wheelFlex: [1, 1, 0], // 显示省和市 pickerConfirmBtnText: "确定", pickerCancelBtnText: "取消", pickerTitleText: "选择城市", onPickerConfirm: data => { // data = [广东,广州,天河] this.setState( { city: data[1] } ); } }); Picker.show();
使用 react-native-image-crop-picker
图片裁切组件
-
安装
yarn add react-native-image-crop-picker
-
使用
import ImagePicker from 'react-native-image-crop-picker'; ImagePicker.openPicker({ width: 300, height: 400, cropping: true }).then(image => { console.log(image); });
jmessage-react-plugin
极光推送 react-native 版本
开通服务
- 首先 需要我们自己先在极光上注册账号 开通服务,拿到对应的密钥
简单使用
-
安装依赖
yarn add jmessage-react-plugin jcore-react-native
-
配置
-
android\app\src\main\AndroidManifest.xml
加入以下代码<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /> <!-- 极光的配置 --> <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}" /> <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}" /> <!-- 极光的配置 --> </application>
-
android\app\build.gradle
加入以下代码和按需修改android { compileSdkVersion rootProject.ext.compileSdkVersion compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } defaultConfig { applicationId "com.awesomeproject22" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 versionName "1.0" multiDexEnabled true // 新增的 manifestPlaceholders = [ JPUSH_APPKEY: "c0c08d3d8babc318fe25bb0c", //在此替换你的APPKey APP_CHANNEL: "developer-default" //应用渠道号 ] }
dependencies { implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.facebook.react:react-native:+" // From node_modules compile project(':jmessage-react-plugin') // 新增的 compile project(':jcore-react-native') // 新增的 if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImplementation files(hermesPath + "hermes-release.aar") } else { implementation jscFlavor } }
-
根目录下新建文件和添加以下配置
react-native.config.js
module.exports = { dependencies: { 'jmessage-react-plugin': { platforms: { android: { packageInstance: 'new JMessageReactPackage(false)' } } }, } };
-
android\settings.gradle
加入如下配置
include ':jmessage-react-plugin' project(':jmessage-react-plugin').projectDir = new File(rootProject.projectDir, '../node_modules/jmessage-react-plugin/android') include ':jcore-react-native' project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')
-
react-native-image-header-scroll-view
顶部吸顶效果
-
下载
yarn add react-native-image-header-scroll-view
react-native-deck-swiper
类似轮播图的滑动组件
-
下载
yarn add react-native-view-overflow react-native-deck-swiper
react-native-image-zoom-viewer
图片缩放组件
-
下载
yarn add react-native-image-zoom-viewer
aurora-imui-react-native
Aurora IMUI 是个通用的即时通讯(IM)UI 库,不特定于任何 IM SDK。
本 UI 库提供了消息列表、输入视图等常用组件,支持常见的消息类型:文字、图片、语音、视频等。默认包含多套界面风格,也能根据自己的需要自定义。
-
安装
yarn add aurora-imui-react-native react-native-fs
-
配置
引入 Package
MainApplication.java
import cn.jiguang.imui.messagelist.ReactIMUIPackage; // 新增的 @Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); packages.add(new AMapGeolocationPackage()); packages.add(new ReactIMUIPackage()); // 新增的 return packages; }
-
android\settings.gradle
添加配置include ':app', ':aurora-imui-react-native' project(':aurora-imui-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/aurora-imui-react-native/ReactNative/android')
-
android\app\build.gradle
添加配置dependencies { ... implementation project(':aurora-imui-react-native')
-
android\app\src\main\AndroidManifest.xml
<manifest xmlns:tools="http://schemas.android.com/tools" // 这里是新添加的 > <application android:allowBackup="false" tools:replace="android:allowBackup" // 这里是新添加的 >
react-native-scrollable-tab-view
顶部tab栏
使用
-
安装依赖
yarn add react-native-scrollable-tab-view @react-native-community/viewpager
-
使用
标签最外层必须为
ScrollableTabView
import React from 'react'; import { Text, } from 'react-native'; import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view'; export default () => { return <ScrollableTabView style={{ marginTop: 20 }} initialPage={1} renderTabBar={() => <DefaultTabBar />} > <Text tabLabel='Tab #1'>My</Text> <Text tabLabel='Tab #2'>favorite</Text> <Text tabLabel='Tab #3'>project</Text> </ScrollableTabView>; }
moment
流行的日期库
-
下载
yarn add moment
-
设置语言
import moment from "moment"; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default moment;
react-native-image-picker 图片选择工具
-
安装
yarn add react-native-image-picker
mobx mobx-react
- 安装mobx mobx-react
yarn add --save-dev mobx mobx-react
- 因为要用到装饰器,所以需要安装一个依赖去解析
yarn add @babel/plugin-proposal-decorators
- 然后在.babelrc配置
['@babel/plugin-proposal-decorators', { 'legacy': true }]
- 使用
import {Provider} from 'mobx-react'
import RootStore from './src/mobx'
<Provider RootStore ={RootStore} UserStore={UserStore}>
{this.state.isInit ? <Routers></Routers> : <></>}
</Provider>
三、错误记录
1、‘react-native’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
(1)解决方法 在vscode 不能使用 但是在Windows cmd 中可以使用命令
(2)解决
1.查看npm目录下是否安装react-native-cli
2. 安装react-native-cli:
npm install -g react-native-cli
2、VSCode中"experimentalDecorators"设置
解决:搜索tsconfig.json勾选保存
3、开发中调试 react-native-debugger
4、debugger中不能查看请求
解决 在 index.js中加入
import 'react-native-gesture-handler';
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
5、Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
然后把Android项目中local.properties文件拷贝到RN项目Android文件夹中
local.properties内容是sdk目录
sdk.dir = C:/Users/Mars/AppData/Local/Android/sdk