反應原生白屏

Question

我是 React-Native 的新手，真的是 React 的新手。 我正在做 Learning-React-Native. 書中的練習。 但是有很多不同的東西，我認為是版本。 我的代碼在 ADV 上顯示了一個白屏，並假設它必須顯示另一件事。 控制台沒有顯示任何錯誤。

本書在 Forecast.js 文件中建議， render: function(){...} 但它以這種方式啟動我一個錯誤，因此我只是通過 render() {...}

這是我的 WeatherProject.js

// Importing react Components module
import React, { Component } from 'react';
// Importing another modules for React.
import {
  Platform,
  StyleSheet,
  Text,
  TextInput,
  View
} from 'react-native';

import Forecast from './Forecast';

/*
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
*/

// WeatherProject class for WeatherProject.js
export default class WeatherProject extends Component {
  // App exec always as first the constructor method
  constructor(props){

    /*
    * La palabra clave super se usa para acceder y llamar funciones en el elemento primario de un objeto.
    * The super keyword can also be used to call functions on a parent object.
    * The parent class is Component.
    *
    * super([arguments]); // calls the parent constructor.
    * super.functionOnParent([arguments]);
    *
    */
    super(props);

    // Constructor controls the first state of variables that can be modified by this keyword.
    this.state = {
      zip: '',
      forecast: {
        main: 'Clouds',
        description: 'few clouds',
        temp: 45.7
      }
    }
  }

  // _handleTextChange method use a event for change a value of zip variable with this.setState
  _handleTextChange(event) {
    console.log(event.nativeEvent.text);

    // Getting the event value and setting on zip variable
    this.setState({
      zip: event.nativeEvent.text
    });
  }

  // Render de application.
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          You input {this.state.zip}.
        </Text>
        <Forecast
          main={this.state.forecast.main}
          description={this.state.forecast.description}
          temp={this.state.forecast.temp}/>
        <TextInput
          style={styles.input}
          returnKeyType='go'
          onSubmitEditing={this._handleTextChange}/>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  input: {
    fontSize: 20,
    borderWidth: 2,
    height: 40,
  },
});

這是我的 Forecast.js

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

class Forecast extends Component {
  render() {
    return (
      <View>
        <Text style={styles.bigText}>
          {this.props.name}
        </Text>
        <Text style={styles.mainText}>
          Current conditions: {this.props.description}
        </Text>
        <Text style={styles.bigText}>
          {this.props.temp}°F
        </Text>
      </View>
    );
  }
}

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

module.exports = Forecast;

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，因為它們有一個免費層，可以幫助您找出錯誤發生的位置。