React native 动态更改背景图像

我想在提交城市名称时更改背景图像，但不知道如何动态更改背景图像。我一直在使用三元运算符，但没有提供所需的输出。（React native noobie）

这是我的主要代码

import React, {Component} from 'react';
import {Image, TextInput, ImageBackground, StyleSheet, Text, View} from 'react-native';
import OpenWeatherMap from './Components/openweathermap';
import WeatherForecast from './Components/forecast';
import Images from './android/app/assets/images';

export default class why extends Component {
constructor(props){
  super(props);
   this.state = {forecast: null, doesShow: false};
}
textHandleChange = event => {
 let city = event.nativeEvent.text;
 OpenWeatherMap.fetchWeather(city).then(forecast =>{
   this.setState({forecast : forecast});              //Used for fetching weather data using fetchAPI
 });
}


backgroundChange = () => {
  this.setState({doesShow:true})
}



  render(){
  let content = null;
   if(this.state.forecast !== null){
     content = (

         <WeatherForecast
         main = {this.state.forecast.main}
         description = {this.state.forecast.description}
         temp = {this.state.forecast.temp}                   //For displaying the fetched Weather data
        />

     );
   }

    return(

      { {this.state.doesShow} === true ?

        <ImageBackground
       source = {Images.pic4}
       style={styles.imageDeco}>  :

       <ImageBackground
        source = {Images.pic3}
        style={styles.imageDeco}> }


       <View style= {styles.a1}>
         <View style = {styles.top}>
           <Text style={styles.a2}>Weather Forecast</Text>
         </View>
           <Text style={styles.a3}>Enter your city ID</Text>
           <TextInput
            onSubmitEditing={this.textHandleChange}
            onChangeText={this.backgroundChange}
            style={styles.a4}></TextInput>
          {content}
       </View>
      </ImageBackground>
    );
  }
}
const styles = StyleSheet.create({
  imageDeco:{
    flex:1,
    width: '100%',
    height: '100%'
  },
  a1:{
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(47,163,218,0.2)'
  },
  a2:{
    fontSize: 30,
    color: 'rgba(128,0,0,1)',
    borderColor: '#FFF',
    borderWidth: 2,
    backgroundColor: 'rgba(255,219,153,0.6)',
    padding: 10,
    paddingLeft: 10,
    paddingRight: 10,
    fontFamily: 'Lobster'
  },
  a3:{
    fontSize: 25,
    color: 'blue',
    fontFamily: 'Pacifico'
  },
  a4:{
    backgroundColor:'#ffe0bd',
    width: '30%',
    marginTop: 20,
    borderColor: 'black',
    borderRadius: 50,
    fontFamily: 'Lobster',
    fontSize: 30,
  },
  top:{
    justifyContent:'center',
    alignItems:'center',
    width: '70%'
  }
})

import React，{Component}来自'React'；
从“react native”导入{Image，TextInput，ImageBackground，样式表，文本，视图}；
从“./Components/OpenWeatherMap”导入OpenWeatherMap；
从“./Components/forecast”导入天气预报；
从“/android/app/assets/Images”导入图像；
导出默认类为什么扩展组件{
建造师（道具）{
超级（道具）；
this.state={forecast:null，doesShow:false}；
}
textHandleChange=事件=>{
让city=event.nativeEvent.text；
OpenWeatherMap.fetchWeather（城市）。然后（forecast=>{
this.setState（{forecast:forecast}）；//用于使用fetchAPI获取天气数据
});
}
背景变化=（）=>{
this.setState（{doesShow:true}）
}
render（）{
让content=null；
if（this.state.forecast！==null）{
内容=(
);
}
返回(
{{this.state.doesShow}==true？
:
}
天气预报
输入您的城市ID
{content}
);
}
}
const styles=StyleSheet.create({
imageDeco：{
弹性：1，
宽度：“100%”，
身高：“100%”
},
a1:{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“rgba（47163218,0.2）”
},
a2:{
尺寸：30，
颜色：“rgba（128,0,0,1）”，
边框颜色：“#FFF”，
边界宽度：2，
背景颜色：“rgba（255219153,0.6）”，
填充：10，
paddingLeft:10，
paddingRight:10，
fontFamily：“龙虾”
},
a3:{
尺寸：25，
颜色：“蓝色”，
fontFamily:“Pacifico”
},
a4:{
背景颜色：“#ffe0bd”，
宽度：“30%”，
玛金托普：20，
边框颜色：“黑色”，
边界半径：50，
fontFamily：“龙虾”，
尺寸：30，
},
顶部：{
辩护内容：'中心'，
对齐项目：'中心'，
宽度：“70%”
}
})

我的主要目标是从获取的天气数据中更改背景图像。

var icon=this.props.img1？require（'image/img1.png'）：require（'image/img2.png'）；
var icon = this.props.img1 ? require('image/img1.png') : require('image/img2.png');
<Image source={icon} />

您可以根据需要在此处更改逻辑，使用

开关

或根据需要构建require

---

并通过嵌套表单react native使用背景img。我总是这样做。您可以在此处找到详细信息：

我不想更改背景颜色，而是想完全渲染不同的图像..我更新了答案，如果您对此有任何其他问题，请告诉我。谢谢。非常感谢您，您的逻辑工作正常。将尝试实现此逻辑，以便根据天气数据更改背景图像…：-）请将其标记为ok，以便其他人知道这是一个好的解决方案。谢谢