React-Native笔记

最新推荐文章于 2023-11-17 13:55:04 发布

置顶 he_wen_jian

最新推荐文章于 2023-11-17 13:55:04 发布

阅读量1k

点赞数 1

分类专栏： React-Native

本文链接：https://blog.csdn.net/he_wen_jian/article/details/84442789

版权

React-Native 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

使用淘宝 NPM 镜像

1：Text篇

2：npm start 报错 EPERM: operation not permitted, lstat

3：npm install

4 : react-native run-android 运行异常

5：Android 真机运行出现红屏

6:native-base 中icon不能正常显示

7：React-Native 循环添加组件方法

8：FlatList 列表的使用注意事项

9:一体机或者手机无法通过摇一摇打开菜单栏

10：string转化为Date的坑

11：运行报告异常：SyntaxError: Unexpected token in JSON at position 0

13：createBottomTabNavigator切换时刷新页面

14:react-native run-android ,运行是提示：27 actionable tasks: 4 executed, 23 up-to-date

15:TextInput ...\node_modules\react-native\Libraries\Core\ExceptionsManager.js:84 Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `TextInput`, expected `string`.

16:异常-

17：避免使用npm audit fix

18：TextInput 在Android上显示不全问题或者垂直方向无法居中：

19：TextInput 触发输入后，Button需要两次点击触发onPress

20：在ScrollView中避免使用position:"absolute",绝对位置样式，在ScrollView未能填满整个屏幕时UI出现压缩。

21：Text控件出现部分机型上下显示不完整时，添加lineHeight参数。

22:react-native-gesture-handler 第三方库编译异常：

23:android中当引用so文件时，部份手机会报 /system/lib64, /vendor/lib64]]] couldn't find

24：导入第三方组件时：Unfortunately you can't have non-Gradle Java modules and Android-Gradle modules in one project

25：TypeScript项目想通过import image from "../image.png"的形式导入资源

25：Android中无法播放GIF动图

26：setState执行的关键步骤

27:隐藏黄色警告

28:为了加快页面跳转速度，可以在componentWillMount方法中进行优化

例如

使用淘宝 NPM 镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

1：Text篇

1：Text超长显示'...'缩略号：

设置：numberOfLines={1} style={{width:20}},宽度自定义，超长便会显示缩略号，默认缩略号在右手边。如果需要改变缩略号的位置可以使用ellipsizeMode 属性

值有：‘head’ 头部 ‘middle’中间 ‘tail’右边

2：npm start 报错 EPERM: operation not permitted, lstat

处理方法：打开文件：react-modules/react-native/local-cli/server/server.js

在 function server(argv: mixed, config: RNConfig, allArgs: Object) 函数中注销代码：

process.exit(11);即可

3：npm install

npm WARN tar zlib error: unexpected end of file
npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
解决方法

npm cache clean --force

npm install

4 : react-native run-android 运行异常

Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:

1：如果你的手机上已安装了该应用可以尝试卸载应用再次运行react-native run-android.有时候能够解决问题。

5：Android 真机运行出现红屏

adb reverse tcp:8081 tcp:8081 #建立一个从设备向电脑转发的端口

6:native-base 中icon不能正常显示

由于Icon有不同的提供者例如（Entypo,EvilIcons、FontAwesome等等https://oblador.github.io/react-native-vector-icons/中查看）

默认情况下，会使用“Ionicons”提供的icon。那么，如果我想使用的icon不是”Ionicons“提供的可怎么办呢？

7：React-Native 循环添加组件方法

方法一：Map 循环

注意：map循环中必须传递key参数，否则出现警告：Warning: Each child in an array or iterator should have a unique "key" prop.

 productListss(orderDetail){
        return orderDetail['orderDetails'].map((item,index)=>{
           return <OrderProductItem
                OrderDetailData={item}
                key={index}
            />
        })
}

方法二：for循环

 productListss(orderDetail){
     for(var index in orderDetail['orderDetails']){
            return <OrderProductItem OrderDetailData={orderDetail['orderDetails'][index]}/>
        }
    }

8：FlatList 列表的使用注意事项

一定要添加：keyExtractor={(item,index)=>index.toString()},否则会报黄屎一样的警告： VirtualizedList: missing keys for items, make sure to specify a key property on each item or provide a custom keyExtractor.

 <FlatList
        {...this.props}
        onRefresh={()=>{ this.beginHeaderRefresh() }}
        refreshing={this.state.isHeaderRefreshing}
        onEndReached={() => { this.beginFooterRefresh() }}
        onEndReachedThreshold={0.1}  // 这里取值0.1，可以根据实际情况调整，取值尽量小
        ListFooterComponent={this._renderFooter}
        keyExtractor={(item, index) => index.toString()}
      />

9:一体机或者手机无法通过摇一摇打开菜单栏

方法：

1：通过命令打开菜单

adb shell input keyevent 82

10：string转化为Date的坑

let date=new Date("2019-04-24 12:12:12")；

在调试模式下完全没有问题

但是在非调试模式下date=NaN

方法：

function parseDate(dateString){
    let dateParam = dateString.split(/[\s-:]/);
    dateParam[1] = (parseInt(dateParam[1], 10) - 1).toString()
    return new Date(...dateParam)
};

调用方法 let date=parseDate(2019-04-24 12:12:12);

11：运行报告异常：SyntaxError: Unexpected token in JSON at position 0

SyntaxError: Unexpected token   in JSON at position 0
at JSON.parse (<anonymous>)
at FileStore.get(:****\node_modules\metro-cache\src\stores\FileStore.js:26:19)

在发布版本后进行调试提示异常，

方法：

npm start -- --reset-cache

清理缓存，然后再次react-native run-android

13：createBottomTabNavigator切换时刷新页面

默认导航栏切换时，只会第一次切换会调用：componentDidMount,初始化函数，如果跳转到其它页面后返回时需要刷新页面怎么办？

方法：

componentDidMount() {
        this._navListener = this.props.navigation.addListener('didFocus', () => {
            this.refreshView();//刷新页面方法
        });
    }
 componentWillUnmount() {
        this._navListener.remove();
    }

14:react-native run-android ,运行是提示：27 actionable tasks: 4 executed, 23 up-to-date

方法1：

可能是模拟器或者手机没有内存了，清空部分内存就可以了。（其它问题暂时没发现，但是应该没那么简单）

15:TextInput ...\node_modules\react-native\Libraries\Core\ExceptionsManager.js:84 Warning: Failed prop type: Invalid prop `value` of type `number` supplied to `TextInput`, expected `string`.

<TextInput style={styles.textInput}
                                   returnKeyType={"done"}
                                   keyboardType={'numeric'}
                                   value={this.state.cardNo_add}
                                   onChangeText={(text)=> this.setState({cardNo_add:text})}
                        >

改为

value={`${this.state.cardNo_add}`} 注意" ` "这个符号不要搞错

<TextInput style={styles.textInput}
                                   returnKeyType={"done"}
                                   keyboardType={'numeric'}
                                   value={`${this.state.cardNo_add}`}
                                   onChangeText={(text)=> this.setState({cardNo_add:text})}
                        >

16:异常-

Script 'F:\-----\node_modules\react-native\react.gradle' line: 95

* What went wrong:
A problem occurred configuring project ':app'.
> Could not get unknown property 'mergeResourcesProvider' for object of type com.android.build.gradle.internal.api.ApplicationVariantImpl.
方法：

在gradle-wrapper.properties中
更改distributionUrl为distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
并在根build.gradle文件中将gradle类路径更改为：classpath 'com.android.tools.build:gradle:3.3.0'
将0.59-stable / template中的文件'metro.config.js'复制到您的项目中。
再次删除node_modules，yarn install和run-android。

17：避免使用npm audit fix

18：TextInput 在Android上显示不全问题或者垂直方向无法居中：

style中添加：paddingVertical:0即可解决

19：TextInput 触发输入后，Button需要两次点击触发onPress

方法：外层包裹ScrollView,并添加属性：keyboardShouldPersistTaps

'never' （默认值），点击 TextInput 以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
'always'，键盘不会自动收起，ScrollView 也不会捕捉点击事件，但子组件可以捕获。
'handled'，当点击事件被子组件捕获时，键盘不会自动收起。这样切换 TextInput 时键盘可以保持状态。多数带有TextInput 的情况下你应该选择此项。
false，已过时，请使用 'never'代替。
true，已过时，请使用 'always' 代替。
经测试，使用 always 或者 handled 均可解决发生的问题，由于我这里是 ScrollView 内部存在多个 TextInput，故选择 handled 值。

 <ScrollView keyboardShouldPersistTaps={"handled"}>

20：在ScrollView中避免使用position:"absolute",绝对位置样式，在ScrollView未能填满整个屏幕时UI出现压缩。

21：Text控件出现部分机型上下显示不完整时，添加lineHeight参数。

22:react-native-gesture-handler 第三方库编译异常：

RNGestureHandlerEvent.java:20: 错误: 程序
包Pools不存在
new Pools.SynchronizedPool<>(TOUCH_EVENTS_POOL_SIZE);

....

解决方法：android/gradle.properties 中添加：android.useAndroidX=true android.enableJetifier=true

23:android中当引用so文件时，部份手机会报 /system/lib64, /vendor/lib64]]] couldn't find

解决方法：

1：在gradle.properties加上

android.useDeprecatedNdk=true

2：build.gradle加上

android {
    ...
    defaultConfig {
        ...
        ndk {
            abiFilters "armeabi-v7a", "x86", "armeabi"
        }
    }
}

24：导入第三方组件时：Unfortunately you can't have non-Gradle Java modules and Android-Gradle modules in one project

解决方法：关闭项目和AndroidStudio,并删除：.idea文件夹，重新打开项目，问题就解决了

25：TypeScript项目想通过import image from "../image.png"的形式导入资源

在项目根目录下添加global.d.ts申明文件：

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'
declare module '*.mp3'

25：Android中无法播放GIF动图

打开：android/app/build.gradle文件，在dependencies中添加第三方库：

React Native 59.X

implementation 'com.facebook.fresco:animated-gif:1.11.0'

React Native 60.X

implementation 'com.facebook.fresco:animated-gif:2.0.0'

dependencies {
    implementation 'com.facebook.fresco:animated-gif:1.11.0'
}

在android下执行：gradlew clean，然后再执行：react-native run-android 即可

26：setState执行的关键步骤

1、React的更新策略已被启动时（事件触发时）

react响应事件处理=>启动更新策略事务（绑定了wrapper）=> 事务perform => setState =>获取内部实例 =>更新策略事务perform完毕 =>wrapper 处理组件状态的更新。

2、React的更新策略没有被启动时（异步触发时）

setState =>获取内部实例 => 存储新的状态 =>发现更新策略事务未启动 =>启动更新策略事务（绑定了wrapper）=> 事务perform => 将当前内部实例放入旧组件数组=>更新策略事务perform 完毕=> wrapper 处理状态的更新=>setState执行结束。

27:隐藏黄色警告

在index.js中添加

console.disableYellowBox = true;

28:为了加快页面跳转速度，可以在componentWillMount方法中进行优化

例如

  componentWillMount=async ()=> {
    loading(true);
    InteractionManager.runAfterInteractions(async () => {
      let {categoryId} = this.props;
      try{
        let data:any=await storage.load({key:"selfmenu"});
        this.setState({data:data[categoryId].next});
      }catch (e) {
       console.log("自选菜单加载异常",e);
      }
    })
    loading(false);
  }

he_wen_jian

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React-Native笔记

使用淘宝 NPM 镜像大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:$ npm install -g cnpm ...
复制链接

扫一扫

专栏目录