你的位置:首页 > Java教程

[Java教程]React Native 常见问题集合


在使用React Native时候,我记录下比较常遇到的问题,分为以下几类:

1. 调试问题

2. 写法问题

3. 疑难问题

4. 奇怪问题

调试问题

1. 在react-native run-android运行后,真机上打开的空白页面。

我测试机是红米2A(Android 4.4.4),在调试时,发现没有reload的菜单栏,也没有日志出现。

原因:需要到应用->权限管理->显示悬浮窗打开,这样才可以查看错误日志。

2. 打成的apk安装包安装后, 替换的图片(应用icon)没有变,还是旧图片?

原因:这应该是你机器本来就安装过测试包了,有了缓存,重启下机器就可以了。

3. 怎么进行js调试?

解答:可以在代码里面写一个debugger,然后在手机上点击"start remote js debugging",这是会自动打开一个Chrome页面,打开开发者控制台。当代码经过debugger时候,即可调试。

写法问题

1. Application simpleAPP has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.

原因: AppRegistry.registerComponent('testProject', () => RnListView);   这一句,要看testProject这个参数有没有写对,是不是跟应用名一样(你初始化的应用名)。

2. Adjacent JSX elements must be wrapped in an enclosing tag.

例如:

 render: function() {  return (    <h1>something</h1>    <div>     something else    </div>  ); }});

原因:React element can return only one element. 官方有Q&A说明,只能返回一个element,上面返回了两个element。

3.  图片加载不了?

例1:

var localImg = "./images/demo/newsImg2.png";require( localImg );

例2:

require( "./images/demo/newsImg2.png");

第一种情况加载不了。

原因:为了使新的图片资源机制正常工作,require中的图片名字必须是一个静态字符串,这是React规定。

4. 为什么要这样写onPress={ () => this.goback() } ,而不是onPress={  this.goback } ?

原因:我认为是为了保持goback函数里this的指向。

疑难问题

1. Android状态栏的“沉浸式”设置无效?

例如:

<StatusBar   backgroundColor='blue'   translucent = {true}/>

经过我的尝试,hidden属性是有效,但translucent的效果没有出现。  不过有另外解决方法:

在styles.
   <style name="ImageTranslucentTheme" parent="Theme.AppCompat.Light.NoActionBar">      <item name="android:windowTranslucentStatus">true</item>      <item name="android:windowTranslucentNavigation">true</item>   </style> 


在manifest的activity加上:
android:theme="@style/ImageTranslucentTheme"
然后在每个页面的Header都要相应加多高度来适应:
paddingTop: 20, height: 68, 


2. react-native-gifted-listview 用这个组件时候,报了两个warning!

(1). In next release empty section headers will be rendered. In this release you can user 'enableEmptySections' flag to render empty section headers.

解决:找到node_modules下的react-native-gifted-listview,在ListView下 加个 enableEmptySections = {true} 就可以解决了。

(2). Circular indeterminate 'ProgressBarAndroid' is deprecated. Use 'ActivityIndicator' instead.

解决:找到node_modules下的react-native-gifted-spinner,修改组件。

PS:这个组件开发者没有及时更新。

3. TouchableHighlight的onPress事件无效,总报“undefined is not a function”?

例如:

 _pressRow(title){     Alert.alert( 'Alert Title', "fuck",[{ text: 'OK', onPress: () => console.log('OK Pressed!')}])  }   _renderRowView(rowData) {     return (        <TouchableHighlight          underlayColor='#c8c7cc'          onPress={ () => this._pressRow(rowData.title)}>        </TouchableHighlight>     );   }   render() {     return (        <ScrollView>          <ListView             dataSource={this.state.dataSource}             renderRow={ this._renderRowView}/>        </ScrollView>     );   }

原因:renderRow={ this._renderRowView},里面渲染的列里面的this不再是最外层的this,需要改成this._renderRowView.bind(this)。

4. 尺寸怎么计算,设计图到具体数值?

解决:这个可以查看https://segmentfault.com/a/1190000002658374 这篇文章,挺详细的。

5. 组件之间的传值怎么做?

解决:这个可以查看http://blog.csdn.net/gz_jero/article/details/51531247。

6. 怎么图片显示不完整?

代码如下(只显示部分):

// Card视图var Card = React.createClass({ showToast: function(num: i) {  ToastAndroid.show(NAMES[num].toString(), ToastAndroid.SHORT); }, // 左右留空, 中间匹配 render: function() {  return (   <TouchableOpacity    style={styles.button}    onPress={() => this.showToast(this.props.num)}   >    <Image     style={styles.image}     resizeMode={'cover'}     source={this.props.img}/>   </TouchableOpacity>  ); }});// 批量创建var createCardRow = (img, i) => <Card key={i} img={img} num={i}/>;var ListViewModule = React.createClass({ render: function() {  var verticalScrollView = (   <ScrollView    style={styles.container}>    {IMAGES.map(createCardRow)}   </ScrollView>  );  return verticalScrollView; }});var styles = StyleSheet.create({ container: {  flex: 1, }, button: {  justifyContent: 'space-between',  alignItems: 'center',  flexDirection: 'row',  margin: 10, }, image: {  flex: 1,  height: 200,  borderRadius: 5,  borderWidth: 2,  borderColor: '#FF1492', }, blank: {  width: 10, }});

原因:当图片没有设置width具体数值,弹性布局并不会将图片自适应到整个容器宽度,而是按着图片本身大小显示。

简单说就是图片不能用flex设置宽度。(这个原因是我的猜想)

我在Web做了测试:

 <div style="width:200px;flex:'flexDirection';">   <img src="F:\workspace_react\testProject\list_view_module\images\jessicajung.png" style="flex:1"/>   <div style="flex:1">234</div> </div>

实验结果是,上面图片宽度还是732px,而下面的div是200px。

奇怪问题

1. 页面变得可以左右拖动,可以看到一片空白。

原因:当Navigator组件设置的转场动画是Navigator.SceneConfigs.HorizontalSwipeJump,那就会导致一个神奇的效果,页面可以左右拖动,看到一片空白区域(这个效果我觉得慎用)。

2. Github上有时有些库按命令装不了。

在安装库时候,发现了奇怪的现象。有时安装时,安装会报错。

解决:尝试加上--save或者删除--save就可以了!

3. 为什么要从react-native、react两个不同地方important组件? 

例如:

import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View} from 'react-native';

react-native应该是包含原生组件部分,而React应该是与平台无关的基础组件。

 

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。
本文地址 :http://www.cnblogs.com/lovesong/p/5679340.html