Question

感谢您查看此主题:)我仍然开始学习按关于我想通过单击button.Change图像来更改应用程序的本机响应，因此至少我被尝试成为自己的代码。事物问题没有发生任何错误，因为我看不到应用程序上的图像，但是按钮正在工作。并且在我稍后更改之前，它们显示黄色警告消息

图像组件需要'source'属性而不是'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,
  }

});

希望这会有所帮助！

反应本机不显示有关状态功能的图像

1 个答案: