Получение данных с одного экрана на другой экран для рендеринга (React Native Javascript) - PullRequest
Новая
       33

Получение данных с одного экрана на другой экран для рендеринга (React Native Javascript)

0 голосов
/ 20 февраля 2019

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

Я действительно не понимаю, как получить данные, так как большинство людей передают данные, а не извлекают их.У меня есть фотографии, чтобы проиллюстрировать то, что я спрашиваю.

Здесь у меня есть объекты с моего 1-го экрана.И затем в моем 2ndScreen я хочу отобразить imageSource из 1stScreen как item.imageSource в качестве списка изображений.Как мне получить объекты с 1-го экрана, чтобы иметь доступ к ним на 2-м экране?

1-й экран 

import React from 'react';
import { StyleSheet, View, FlatList, ScrollView } from 'react-native';

export default class CaterpillarObjectList extends React.Component {
    render() {

const blackswallowtailimageList = 
    [{key:'blackSwallowTail01', imageSource: require('../assets/ArboretumPhotos/Black_Swallowtail/blackswallowtail1.jpg')},
    {key:'blackSwallowTail02', imageSource: require('../assets/ArboretumPhotos/Black_Swallowtail/blackswallowtail2.jpg')},
    {key:'blackSwallowTail03', imageSource: require('../assets/ArboretumPhotos/Black_Swallowtail/blackswallowtail3.jpg')},];

2ndScreen

(Примечание: я вызвал imageList на 2-м экране, но я хочу получить imageList как blackswallowtailimageList с 1-го экрана) 

    {imageList.length > 0 ? 
                      <FlatList horizontal = {true} data={imageList}
                        renderItem={({item})=> (
                          <View style={{borderBottomColor:'#999', padding:10}}>  
                           <View>
                            <Image style ={ {width: 300, height: 300}} source={item.imageSource}/>
                          </View>
                        </View>   
                          )} />

1 Ответ

0 голосов
/ 20 февраля 2019

При переходе от одного экрана 1 к экрана 2 , вы можете передавать параметры и получать их на экране 2.

В вашем случае вы можете передатьimageList по мере навигации.Как и в примере ниже, 

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });
          }}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title="Go to Details... again"
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId: Math.floor(Math.random() * 100),
            })}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

Примечание: я не могу помочь, поскольку вы не поделились с нами полным кодом.Но, я надеюсь, у вас есть основная идея совместного использования данных между двумя разными экранами.

Есть еще несколько примеров по адресу: Передача параметров в маршруты

Дайте мне знать, если этоэто не тот ответ, который вы ищете.

...