javascript - React Native 渲染问题

Question

我正在构建一个简单的天气应用程序，但在渲染天气预报时遇到一些问题。不知道是不是造型的问题。我知道通过浏览器进行 api 调用，并且 android studio 中的调用没有错误

App.JS

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';
import Forecast from './components/Forecast';
import Weather from './components/Weather'

class WeatherApp extends Component {
  constructor(props){
    super(props);
    this.state = { 
    //setting the state to an empty string while keeping the forecast null 
      zip: "",
      forecast: null
    };
  }
  _handleTextChange = event => {
    //this function handles the text change when typing in a zip
    let zip = event.nativeEvent.text;
    Weather.fetchForecast(zip).then(forecast => {
      this.setState({forecast: forecast})
    })
  }
  render() {
    let content = null;
    if(this.state.forecast !== null) {
      content = (
        <Forecast 
          main = {this.state.forecast.main}
          description = {this.state.forecast.description}
          temp = {this.state.forecast.temp}
        />
      )
    }
  return (
    <View style = {styles.container}>
      <Text style = {styles.welcome}>
        Please Input {this.state.zip}
      </Text>
      <TextInput
        style = {styles.input}
        onSubmitEditing={this._handleTextChange}
      />
    </View>
    )
  }
}



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

export default WeatherApp;

这是我的 Forecast.js，它应该在设置状态后呈现预测。

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

// component renders forecast based on zip code
class Forecast extends Component {
    render(){
        return(
            <View style = {styles.container}>
                <Text style = {styles.bigText}>
                    {this.props.main}
                </Text>
                <Text style = {styles.mainText}>
                    Current condition:
                    {this.props.description}
                </Text>
                <Text style = {styles.bigText}>
                    {this.props.temp}
                </Text>
            </View>
        );
    }
};

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

export default Forecast;

在react-devtools中我什至没有看到组件渲染或显示。这是没有正确使用 Flexbox 的样式结果吗？

Answer 1

您将 content 声明为 Forecast 组件，但从未在 render() 中实际引用它。