关于React native Demo项目的总结

最新推荐文章于 2024-06-08 17:39:03 发布

cyadyx

最新推荐文章于 2024-06-08 17:39:03 发布

阅读量761

点赞数 1

文章标签： react react native

本文链接：https://blog.csdn.net/cyadyx/article/details/117983805

版权

简述

至于项目都是学习其他人的实战项目，这里不过是做一个学习总结，主要是记录下使用到的包和一些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服务

申请高度地图的key

下载依赖

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" // 这里是新添加的
      >

实例demo

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

cyadyx

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
关于React native Demo项目的总结

简述至于项目都是学习其他人的实战项目，这里不过是做一个学习总结，主要是记录下使用到的包和一些UI工具，以便于参考。react-navigation 页面跳转和转场动画react-native-svg-uri RN 中使用svg技术react-native-tab-navigator 底部导航栏react-native-element 一套ui库内置常用组件react-native-vector-iconsreact-native-linear-gradient 渐变容器
复制链接

扫一扫