Question

我是React-Native的新手，真的是React的新手。我正在从Learning-React-Native。的书中做练习。但是有很多东西是不同的，我认为版本。我的代码在ADV上显示一个白色屏幕，并假设它必须显示另一个东西。控制台不显示任何错误。本书在Forecast.js文件中建议，渲染：function（）{...}但是它以这种方式向我发起错误，因为我只是通过render（）{...}来改变它这是我的WeatherProject.js //导入react Components模块从'react'导入React，{Component}; //为React导入另一个模块。 import { 平台，样式表文本， TextInput之视图来自'react-native'; 来自'./Forecast'的进口预测; / * const instructions = Platform.select（{ ios：'按Cmd + R重新加载，\ n'+ 'Cmd + D或摇动开发菜单'， android：'双击键盘上的R重新加载，\ n'+ '为开发菜单摇动或按菜单按钮'， }）; * / // WeatherProject.js的WeatherProject类 export default class WeatherProject extends Component { // App exec始终作为构造函数方法的第一个构造（道具）{ / * * La palabra clave super se usa para acceder y llamar funciones en el elemento primario de un objeto。 * super关键字也可用于调用父对象上的函数。 *父类是Component。 * * super（[参数]）; //调用父构造函数。 * super.functionOnParent（[arguments]）; * * / 超级（道具）; //构造函数控制可由此关键字修改的变量的第一个状态。 this.state = { 压缩： ''，预测：{ 主要：'云'，描述：'少云'，温度：45.7 } } } // _handleTextChange方法使用一个事件来改变带有this.setState的zip变量的值 _handleTextChange（event）{ 的console.log（event.nativeEvent.text）; //获取事件值并设置zip变量 this.setState（{ zip：event.nativeEvent.text }）; } //渲染应用程序。 render（）{ 回来（＆lt; View style = {styles.container}＆gt; ＆lt; Text style = {styles.welcome}＆gt; 您输入{this.state.zip}。＆LT; /文本和GT; ＆LT;预测主= {this.state.forecast.main} 描述= {this.state.forecast.description} 温度= {this.state.forecast.temp} /＆GT; ＆LT;的TextInput 风格= {} styles.input returnKeyType = '走出去' onSubmitEditing = {this._handleTextChange} /＆GT; ＆LT; /视图＆gt; ）; } }; const styles = StyleSheet.create（{ 容器： { flex：1， justifyContent：'中心'， alignItems：'center'， backgroundColor：'＃F5FCFF'， }，欢迎：{ fontSize：20， textAlign：'center'，保证金：10， }，输入：{ fontSize：20， borderWidth：2，身高：40， }， }）; 这是我的Forecast.js 从'react'导入React，{Component}; import { 样式表文本，视图来自'react-native'; class Forecast extends Component { render（）{ 回来（＆LT;视图＆gt; ＆lt; Text style = {styles.bigText}＆gt; {} this.props.name ＆LT; /文本和GT; ＆lt; Text style = {styles.mainText}＆gt; 现状：{this.props.description} ＆LT; /文本和GT; ＆lt; Text style = {styles.bigText}＆gt; {this.props.temp}°F ＆LT; /文本和GT; ＆LT; /视图＆gt; ）; } } const styles = StyleSheet.create（{ bigText：{ flex：2， fontSize：20， textAlign：'center'，保证金：10，颜色：“＃FFF” }， mainText：{ flex：1， fontSize：16， textAlign：'center'，颜色：“＃FFF” } }）; module.exports =预测;

Answer 1

这里没有任何错误。您的文字与屏幕颜色相同，因此您无法看到它。只需更改Forecast

中的文字颜色即可

  const styles = StyleSheet.create({
  bigText: {
    flex: 2,
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: "black" // Change it to black
  },
  mainText: {
    flex: 1,
    fontSize: 16,
    textAlign: 'center',
    color: "black" // Change it to black
  }
});

Answer 2

白屏表示致命错误，整个应用已崩溃。有时，它可能是找到的最小，最困难的错误，例如const userID = user.uid和user未定义，因此应用程序崩溃并可能变成白色。我建议集成bugsnag，因为它们有免费层，可以帮助您确定错误发生的位置。

反应原生白屏

2 个答案: