Javascript 反应本机渲染问题

我正在建立一个简单的天气应用程序，并有一些问题，使预测。不确定是否是样式。我通过浏览器知道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;

import React，{Component}来自'React'；
进口{
站台
样式表，
文本
看法
文本输入框
}从“反应本机”；
从“./components/Forecast”导入预测；
从“./components/Weather”导入天气
类WeatherApp扩展组件{
建造师（道具）{
超级（道具）；
this.state={
//将状态设置为空字符串，同时保持预测为空
邮政编码：“，
预测：空
};
}
_handleTextChange=事件=>{
//此函数用于在zip中键入时处理文本更改
让zip=event.nativeEvent.text；
Weather.fetchForecast（zip）。然后（forecast=>{
this.setState（{forecast:forecast}）
})
}
render（）{
让content=null；
if（this.state.forecast！==null）{
内容=(
)
}
返回(
请输入{this.state.zip}
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#666666”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
输入：{
尺寸：20，
边界宽度：2，
填充：2，
身高：40，
宽度：100，
textAlign:“中心”
},
});
导出默认WeatherApp；

这是my 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;

import React，{Component}来自“React”；
从“react native”导入{样式表、文本、视图}；
//组件根据邮政编码呈现预测
类预测扩展组件{
render（）{
返回(
{this.props.main}
目前情况：
{this.props.description}
{this.props.temp}
);
}
};
const styles=StyleSheet.create({
容器：{高度：130}，
bigText：{
弹性：2，
尺寸：20，
textAlign：“居中”，
差额：10，
颜色：“FFFFFF”
},
正文：{
弹性：1，
尺寸：16，
textAlign：“居中”，
颜色：“FFFFFF”
}
});
出口违约预测；

---

在react开发工具中，我甚至没有看到组件渲染或显示。这是因为没有正确使用flexbox而导致的样式设置吗

您将

内容

声明为

预测

组件，但从未在

渲染（）中实际引用它

看起来您声明了什么内容，但从未在返回jsx中实际调用它。。。