2018正版葡京赌侠诗React Native 常见难题集合

在接纳React Native时候,笔者记下下相比较常蒙受的问题,分为以下几类:

  1. 调剂难题

  2. 写法难点

  3. 疑难难题

  4. 出人意料难点

调节难点

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

自家测试机是HTC2A(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’, () =>
昂CoranListView);  
这一句,要看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 = ".mo/newsImg2.png";
require( localImg );

例2:

require( ".mo/newsImg2.png");

先是种情形加载不了。

由来:为了使新的图片财富机制平常办事,require中的图片名字务必是一个静态字符串,那是React规定。

4. 怎么要如此写onPress={ () =>
this.goback() } ,而不是onPress={  this.goback } ?

案由:作者觉着是为了保险goback函数里this的针对。

疑难难点

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

例如:

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

透过自个儿的尝试,hidden属性是卓有功能,但translucent的功力没有出现。 
可是有其余消除方法:

在styles.xml加上:

     <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. 怎么图片彰显不完整?

2018正版葡京赌侠诗 1

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

// 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

相关文章