React Native踩坑日记，不断更新中...

最新推荐文章于 2022-09-21 07:52:38 发布

周先生啊

最新推荐文章于 2022-09-21 07:52:38 发布

阅读量404

点赞数 1

分类专栏： RN

本文链接：https://blog.csdn.net/u014369799/article/details/81119830

版权

RN 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.将方法写在了组件外面，相当于java方法写在类外面

2.按钮点击事件忘记使用箭头函数，导致方法找不到，正确做法如下，记得要写this,不写也找不到方法
<Button onPress={()=>{this._onclick()}} title='点击我'></Button>

3.声明的方法不需要加function，可能受了js的影响

4.声明的组件找不到，忘记导包了

5.以下代码第二个输出为空，这是因为_textChange2取值时候这个this.setState其实还没执行完。

console.log('zyl _textChange:'+text);
this.setState(previousState=>{
    return {  inputTet:text};
});
console.log('zyl _textChange2:'+this.state.inputTet);

可以换种写法，把这句console.log('zyl _textChange2:'+this.state.inputTet);加到一个按钮点击事件里面。这时候取出来是有值的。我想这应该类似android里面的主线程跑的比子线程要快吧。

6.官网说的TextInput去除底部边框或者去除底部线，underlineColorAndroid="transparent"来去掉底边框

但是使用的时候要加上大括号，如： underlineColorAndroid={"transpar7.ent"}

7 当我要给一个控件加个外边框的时候，用borderWitdh 是ok的，但如果我想通过borderLeft 等方式加四个方向的线是不行的。

8.TextInput 加了 value={'呵呵'} 属性之后就没法输入了，永远是这个value的值，这不是坑吗？我觉得value应该是默认的文本才对，怎么不能删呢？

9.WebStorm中unresolved function or method require()问题

解决：如果显示enable就点一下，然后就变成下面的Disable就ok了

10.写代码时候出现黄色警告，例如：

var Dimensions = require('Dimensions');

之前后面的'Dimensions'一直黄色警告，虽然不影响运行。但有强迫症看着特别难受，最后的解决方法是按下alt+enter,然后选择

install Dimensions

11.去掉系统组件的黄色警告，例如

看着也是非常难受，虽然不影响运行。解决方法：

首先，点击WebStorm下面的灯泡

去掉下面的俩勾

12.设置TextInput文本居右显示无效，看看是不是有把textAlign写在style里面，如果写在外面是错的，由于习惯性认为是TextInput的属性，所以容易写到外面去，正确写法如下：

<TextInput
    defaultValue={'哈哈'}
    style={{
        flex:2,
        textAlign: 'right'
    }}
>

13.运行报错：undefined is not an object (evaluating CameraManager.Aspect

解决：

Application 里面有行代码被人注释掉了！！！

new RCTCameraPackage(),//二维码扫描

14.Cant find variable List,这个报错说明没导入组件，本来很好找，但我一直在我写那个List组件页面找，一直找不到，浪费时间，但其实是在其他页面引用这个List组件。但没有导入这个组件的路径导致

15.声明这个数组一直报错，后面发现是自己粗心。仔细看，require右边的括号写错位置，不应该放在最后面，手误。

16.TyepeError:Requested keys of a value that is not an object

报上面的错其实是我引用有问题，我代码是这样的

注意看这行，其实通过this是访问不到listData对象的。删除即可。

17.又一大坑。想用Image里面嵌套控件，提示我不能这样做，要用 ImageBackground，用了它之后，我也导包了，一直提示我找不到控件。Cant find variable，重新load代码好几次，都不行。最后解决方法是重启启动服务，npm start

18.关于模拟器，这其实不算RN的坑，属于自己的知识盲区吧。一开始用的是android studio 自带的模拟器，由于RN需要摇一摇或者点击菜单唤出控制台才可以去realod代码，但我建的自带模拟器没有看到这两个功能，实际上摇一摇确实没有，但菜单键还是有的，可以点一下更多看下面这里，有菜单键唤起的快捷键。我的是ctrl+M

19.关于实现RN弹窗效果的，本来自己画个弹窗并不困难。但麻烦的是没有背景变暗的效果，例如实现下面的效果，

可以通过motal来做，实际上是个第三方库。不会使用这个的可以直接搜索motal，查看相关文章去实现，还是比较简单的。

https://github.com/maxs15/react-native-modalbox

20.黄色警告

之前的写法（没写uri的原因）：

<Image source={require(iconBaseState)} style={{width:24,height: 24}}/>

修改后的写法：

<Image source={{uri:require(iconBaseState)}} style={{width:24,height: 24}}/>

21 。使用Motal时候出现，其实就按它说的，添加个方法就好了。

<Modal animationType={'none'}
       transparent={true}
       visible={this.state.modalVisible}
       onShow={() => {}}
       onRequestClose={() => {}}             //这行是我添加的
      >