ReactNative遇到的坑总结(持续更新)

原创
2017/09/15 10:44
阅读数 1.7K

 

问题:在Android中 input组件,文字会有遮挡

在Android中,input组件默认会有内边距,所以把padding改为0可以解决问题

 

问题:在Android中 input组件,底部会有条白线

添加红色的属性underlineColorAndroid

<TextInput

placeholder="搜索关键字"

placeholderTextColor={'#FFFFFF'}

underlineColorAndroid={'transparent'}

style={styles.topInputStyle}

/>

 

问题:安装新的组件后,有时候会提示找不到reactnative

在ReactNative的github中有这个问题的描述,位置是issues/4968

经过测试推荐解决方法是

  • Reset packager cache - rm -fr $TMPDIR/react-* or node_modules/react-native/packager/packager.sh --reset-cache

 

问题:react-native run-android总是不成功

 or   Error:Execution failed for task ':app:transformClassesWithDexForDebug'.

 or   Process 'command 'C:\Program Files\Java\jdk1.7.0_67\bin\java.exe''

测试过几个方法,最简单稳定的方案是:用Android Studio直接运行安卓项目,用这种方式打开模拟器。如果遇到问题,在网上也比较好找解决方案。

 

问题:ReactNative总是出现找不到模块的提示。

推荐安装npm 4.6.1版本,因为npm 5有bug,ReactNative团队推荐使用4.6.1。

 

问题:Android 中StatusBar的translucent属性无效。

相关可见github的讨论:https://github.com/facebook/react-native/issues/6876

在这个讨论贴中,给出的最优方案是放弃这个属性,自定义一个导航栏,这样可以自行调节高度。

 

问题:使用Expo怎么在真机上做测试。

iOS 在APP Stroe下载expo即可,Android 需要在Google Play下载,如果无法使用,可以通过apkPure网站下载expo的安卓版,然后再安装到手机上。

安装好APP后,剩下的就是扫描了。

 

问题:Expo创建项目慢怎么办?

翻墙吧,暂时没有别的办法。

另外,在最新版的expo中,create-react-native创建的项目有错误出现。

所以如果想用expo来做调试,推荐使用expo官方的创建方法。

 

问题:FlatList/SectionList中,renderItem带的参数中结构是什么样的?

如下:

Object {

  "index": 0,

  "item": Object {

    "index": 0,

    "name": "就是我",

  },

  "section": Object {

    "data": Array [

      Object {

        "index": 0,

        "name": "就是我",

      }

    ],

    "renderItem": [Function renderItem],

  },

  "separators": Object {

    "highlight": [Function highlight],

    "unhighlight": [Function unhighlight],

    "updateProps": [Function updateProps],

  },

}

 

问题:ReactNative ref绑定了组件,但是this.refs中没有组件。

解决方式:    ref={(e)=>{this.scrollview=e}}

如果直接使用ref="scrollview",他会绑定到父节点上,不一定和this有关。

 

问题:****RawText ” ” must be wrapped in an explicit component.

这个问题我是因为<View>  </View>,中间有空格导致的。

详情:https://stackoverflow.com/questions/39681173/react-native-error-raw-must-be-wrapped-in-an-explicit-text-component/39682802

 

问题:如何通过点击事件event获取当前点击的组件(Element)?

查一下ReactNative的版本,不同版本不同路径,以0.48为例

import ReactNativeComponentTree from 'reactnative/Libraries/Renderer/shims/ReactNativeComponentTree';



let element = ReactNativeComponentTree.getInstanceFromNode(e.target)._currentElement;

注意:e.target属性是获取显示的组件,如Image。

         e.currentTarget属性是获取点击组件,如TouchableOpacity

 

 

集合贴:

关于UI上的坑总结。

http://www.jianshu.com/p/a59e64443124

 

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
0
分享
返回顶部
顶部