네이티브 렌더 문제 반응

Question

간단한 날씨 앱을 만들고 일부 문제가 있으면 예측이 렌더링됩니다. 스타일링인지 확실하지 않습니다. 나는 브라우저를 통해 API 호출을 알고 오류는이 상태가 설정된 후 예측을 렌더링하기 위해 가정 내 forecast.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; 

App.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; 

반응 - devtools에서 나는 구성 요소 렌더링 또는 표시를 보지 못합니다. 이것은 flexbox를 적절하게 사용하지 않아서 스타일링 한 결과입니까?

Answer 1

content을 Forecast 구성 요소로 선언했지만 실제로는 render()에서 참조하지 마십시오.