React native 不显示关于状态函数的图像

Question

感谢您查看此主题 :) 我仍在开始根据应用程序学习 React Native 我想通过单击 button.so 来更改图片至少我曾尝试过自己 code.as 它在 phone 应用程序上工作没有错误发生在事情问题是我看不到 app.but 按钮上的图像正在工作。在我稍后更改之前，它们会显示黄色警告消息

The Image Component requires a 'source' property rather than 'src'

在我按正确顺序将 src 更改为源之后，消息消失了，但图像仍然无法正常工作。

这里是我写的源码

import React, {useState} from 'react';
import {View,StyleSheet,Image,Button} from 'react-native';



export default function App(){
  const [imageLoc,setImage]=useState({uri:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1280px-React-icon.svg.png"});

  const clickChange = () =>{
      setImage({uri:"https://library.kissclipart.com/20190301/tpq/kissclipart-react-native-clipart-react-native-javascript-65771250223ec746.png"});
  }

  return(
    <View style={styles.div}>
      <Image src={imageLoc.uri} styles={styles.img}/>
      <View style={styles.button}>
      <Button title='Change' onPress={clickChange}/>
    </View>
    </View>
  );

}
const styles = StyleSheet.create({
  div: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  img:{
    height:100,
    width:100,
  },
  button:{
    marginTop:15,
  }

});

Answer 1

我已经编辑了我的代码，检查一下你的代码的问题是在你使用的图像标签中 styles 它应该是 style

改变

<Image src={imageLoc.uri} styles={styles.img}/>

到

 <Image  source={{uri: imageLoc.uri}} style={styles.img}/>

总代码为

import React, {useState} from 'react';
import {View,StyleSheet,Image,Button} from 'react-native';
export default function App(){
  const [imageLoc,setImage]=useState({uri:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1280px-React-icon.svg.png"});
  const clickChange = () =>{
      setImage({uri:"https://library.kissclipart.com/20190301/tpq/kissclipart-react-native-clipart-react-native-javascript-65771250223ec746.png"});
  }
  return(
    <View style={styles.div}>
      <Image  source={{uri: imageLoc.uri}} style={styles.img}/>
      <View style={styles.button}>
      <Button title='Change' onPress={clickChange}/>
    </View>
    </View>
  );

}
const styles = StyleSheet.create({
  div: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  img:{
    height:100,
    width:100,
  },
  button:{
    marginTop:15,
  }

});

希望对您有所帮助！

React native 不显示关于状态函数的图像

React native Not Showing Image About State Function

react-native

react-native-android