将数据从一个屏幕检索到另一个屏幕进行渲染（React Native Javascript）

Question

我有一个屏幕，其中包含一组对象，其中包含图像路径等信息。我希望在屏幕加载时从另一个屏幕检索此屏幕的数据。

我真的很困惑如何检索数据，因为大多数人是在传递数据而不是检索数据。我有照片来说明我在问什么。

这里有来自我的 1stScreen 的对象。然后在我的 2ndScreen 中，我希望将 1stScreen 中的 imageSource 渲染为 item.imageSource 作为图像列表。如何从 1stScreen 检索对象以在 2ndScreen 中访问它们？

第一屏

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，但我想从 1stScreen 中检索 imageList 作为 blackswallowtailimageList）

    {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>   
                          )} />

Answer 1

当从一个Screen 1导航到Screen 2时，您可以传递参数并在Screen 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>
    );
  }
}

注意：我无能为力，因为您尚未与我们分享完整的代码。但是，我希望您了解在两个不同屏幕之间共享数据的主要思想。

还有更多示例：Passing Parameters To Routes

如果这不是您要找的答案，请告诉我。