美文网首页
React Native 部分错误总结

React Native 部分错误总结

作者: 敏0321 | 来源:发表于2018-10-29 10:37 被阅读0次

1.关于直接对Button设置style样式问题

RN中仅支持对Button最小程度的自定义,例如

<View style={[styles.buttonview,{width: (DeviceWidth/2),height: 60}]}>

      <Button title='分享' color= '#ff9900' onPress={() => {alert(123);}} style={{width:300,height:20}}></Button>

      <Button title='销售' color= '#169bd5' onPress={() => {alert(456);}} style={{width: 100,height:200}}/>

    </View>

对Button内width和height设置无效。对此,有个解决方法是在Button外层包裹一个View,通过设置View的style样式来改变Button样式,当然,这不是最优的解决方案,官方提供了一个组件TouchableOpacity。此组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低。可以直接设置TouchableOpacity的style来改变样式。具体的TouchableOpacity使用方法参考官网文档。

2.找不到文件,造成服务器500错误

错误截图

这种错误一般为配置文件丢失,在命令行中执行rm -rf node_modules && npm install 

重新安装一遍,再在命令行中执行react-native run-android,即可再次打开App。

3.修改8081默认端口号的两种方式

(1)启动项目时react-native start --port 8083

(2)手动修改项目下的node_modules\react-native\local-cli\server\server.js下的方法server.js文件,如下图所示。

4.在使用控件前,未导入造成报错

报错界面

这种错误是在使用Text控件的时候,未导入引起的。需在文件开头

import {

AppRegistry,

  StyleSheet,

  ScrollView,

  Image, Text,

  View

}from 'react-native';

在使用控件前,必须先导入。

5.注释格式的使用错误

报错界面

估计是程序中有格式错误请自行检查比如:你注释出来问题。

{/*title="张三"*/}换

//title="张三"

调试的方法

    在APP中,摇动手机后选择“Debug JS Remotely” 

APP上界面

这时候Chrome上就会弹出一个界面

Chrome上界面

这时打开chrome浏览器的开发者工具,就能查看程序的后台log等信息。

项目中打log方法一般为,console.log("这里要看log的内容");

相关文章

网友评论

      本文标题:React Native 部分错误总结

      本文链接:https://www.haomeiwen.com/subject/qhivtqtx.html