React native Не показывает изображение о состоянии функции - PullRequest
Новая
       6

React native Не показывает изображение о состоянии функции

0 голосов
/ 09 апреля 2020

Спасибо за просмотр этой топи c :) Я все еще начинаю учиться реагировать на нативную, как о приложении. Я хочу дать картинку для изменения, нажав кнопку. Поэтому, по крайней мере, меня пытались использовать как собственный код. Как это сработало В приложении для телефона не возникло ошибок при проблемах с приложением. Я не вижу изображения на кнопке app.but работает. и они показывают желтое предупреждающее сообщение до того, как я изменю его позже

Для компонента изображения требуется свойство 'source', а не 'sr c'

at после изменения sr c к источнику в правильном порядке и сообщение исчезло, но изображение все еще не работает.

здесь исходный код, который я написал 

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,
  }

});

1 Ответ

1 голос
/ 09 апреля 2020

Я отредактировал свой код, проверьте, что проблема с вашим кодом в теге изображения, который вы используете 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,
  }

});

Надеюсь, это поможет!

...