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

最新推荐文章于 2022-07-05 13:50:15 发布

weixin_34413357

最新推荐文章于 2022-07-05 13:50:15 发布

阅读量554

点赞数

文章标签： python java ui

原文链接：https://my.oschina.net/CrazyPeter/blog/1537766

版权

2019独角兽企业重金招聘Python工程师标准>>>

问题：在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

转载于:https://my.oschina.net/CrazyPeter/blog/1537766