Используйте переменную внутри рендера React Native - PullRequest
Новая
       11

Используйте переменную внутри рендера React Native

0 голосов
/ 01 августа 2020

Мне нужно использовать URL-адрес из json и отобразить его на экране, используя React Native и ax ios. Я получаю URL-адрес со следующим: 

teste() {

        api.get('photos').then(

            function imagens(response) {
                var i = 1;           
                for (i; i < 2; i++) {
                    urlDaImagem = response.data[i].url
                    console.log('em cima->' + urlDaImagem)
                }
                return urlDaImagem
            })

    }

Мне нужно поместить этот urlDaImagem в компонент изображения. Весь код: 

    import React from 'react';

import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Image,
    StatusBar
} from 'react-native';

import api from '../api';

var urlDaImagem

class PaginaPrincipal extends React.Component {

    teste() {

        api.get('photos').then(

            function imagens(response) {
                var i = 1;           
                for (i; i < 2; i++) {
                    urlDaImagem = response.data[i].url
                    console.log('em cima->' + urlDaImagem)
                }
                return urlDaImagem
            })

    }

    render() {   

        return (
        
            <>
                <StatusBar barStyle="dark-content" />
                <SafeAreaView>
                    <ScrollView contentInsetAdjustmentBehavior="automatic">
                        <View style={styles.sideBySideImages}>
                            <Image style={styles.imagens} source={{ uri: urlDaImagem }} />

                        </View>
                    </ScrollView>
                </SafeAreaView>
            </>
        )
    }
}


const styles = StyleSheet.create({
    imagens: {
        width: "45%",
        height: 183,
        marginBottom: 5,
        marginTop: 5,
        marginStart: "3%",
        marginEnd: "1%"
    },
    sideBySideImages: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
    }
});

export default PaginaPrincipal;

Ответы [ 2 ]

0 голосов
/ 01 августа 2020

Для загрузки данных из API лучше использовать хук useEffect (React native поддерживает его): https://reactjs.org/docs/hooks-effect.html#explanation -why-effects-run-on-each-update

Кроме того, для правильной работы React должен контролировать состояние ваших компонентов. Например, вы должны объявить состояние с помощью хука useState. Глобальные вары без хитростей работать не будут) 

function PaginaPrincipal(props) {
  const [urlDaImagem, setUrlDaImagem] = useState();
  useEffect(
    () => {
      api.get('photos').then(({ data }) => {
        console.log(data);
        const [{ url }] = data;
        setUrlDaImagem(url);
      });
    },
    [] // Effect does not depend on any props
  );
  return (
    <>
      ...
      <Image style={styles.imagens} source={{ uri: urlDaImagem }} />
      ...
    </>
  );
}
0 голосов
/ 01 августа 2020

вы можете использовать состояние в вашем случае, прочтите об этом здесь: https://reactjs.org/docs/state-and-lifecycle.html

и я обновил ваш код, попробуйте его протестировать и посмотреть лучший жизненный цикл для вызова функция teste, и это должно помочь 

import React from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Image,
    StatusBar
} from 'react-native';

import api from '../api';


class PaginaPrincipal extends React.Component {
    state={
           urlDaImagem:""
          }
    teste() {

        api.get('photos').then(

            function imagens(response) {
                var i = 1;
                let urlDaImagem;
                for (i; i < 2; i++) {
                    urlDaImagem = response.data[i].url
                    console.log('em cima->' + urlDaImagem)
                }
                this.setState({urlDaImagem})
            })

    }

    render() {   

        return (
        
            <>
                <StatusBar barStyle="dark-content" />
{ this.state.urlDaImagem && 
                <SafeAreaView>
                    <ScrollView contentInsetAdjustmentBehavior="automatic">
                        <View style={styles.sideBySideImages}>
                           <Image style={styles.imagens} source={{ uri: this.state.urlDaImagem }} /> 

                        </View>
                    </ScrollView>
                </SafeAreaView>
}
            </>
        )
    }
}


const styles = StyleSheet.create({
    imagens: {
        width: "45%",
        height: 183,
        marginBottom: 5,
        marginTop: 5,
        marginStart: "3%",
        marginEnd: "1%"
    },
    sideBySideImages: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
    }
});

export default PaginaPrincipal;
...