时间戳

首页 > 解决方案 > ReactNative：收到新数据时如何更新 ScrollView 内容

react-native - ReactNative：收到新数据时如何更新 ScrollView 内容

问题描述

这可能是一个菜鸟问题，但相信我，我已经到处搜索了，为了我的一生，我似乎无法解决或找到解决这个问题的资源。

我的问题很简单，我有一个按钮，按下时会从设备打开一个图像选择器。我还有一个 ScrollView，理想情况下，它应该包含我从设备中挑选的所有图像。

所以我想做的是：选择一个图像，然后在 ScrollView 上显示该图像。只要图像在启动时可用， ScrollView 本身就可以显示图像，但我希望能够在从图库中选择图像时添加图像。

我尝试使用状态对象，但无论出于何种原因，滚动视图都没有更新。

这是相关的选择器代码：

const addAsset = () => {
    const options = {
      title: title,
      customButtons: [],
      storageOptions: {
        skipBackup: true,
        path: '../../assets/imgs',
      },
    };

    ImagePicker.showImagePicker(options, (response) => {
      // console.log('Response = ', response);
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
        alert(response.customButton);
      } else {
        let oldSource = dataSource;
        // oldSource.push(response.uri)
        dataSource.push({
          id: 4,
          image: response.uri
        })
        // setDataSource(oldSource) //update state to update Image
        // console.log(dataSource)
      }
      });
    }

最小的 ImageView 对象：

const ImageView = (key, src) => {
    return (
      // Flat List Item
      <View key={src.id} style={{padding: 10}}>
        <Image source={src.image}/>
      </View>
    );
  };

在 ScrollView 上，我尝试了：

<ScrollView horizontal style={styles.assetsWrapper}>
    {dataSource.map(ItemView)}
</ScrollView>

对于那些想知道的人来说，数据源看起来像这样：

const [dataSource, setDataSource] = useState([]);

标签： react-nativehorizontalscrollview

解决方案

试试这个..我保持简单，您可以根据需要更改

...

else {
    let oldSource = [...dataSource];
    dataSource.push(image)
    setDataSource(oldSource) 
  }

//////////

<ScrollView horizontal style={styles.assetsWrapper}>
      {dataSource.map((item, index) => (
        <ImageView key={index} image={item} />
      ))}
    </ScrollView>

////////

const ImageView = ({image}) => {
    return (
      // Flat List Item
      <View style={{padding: 10}}>
        <Image source={image}/>
      </View>
    );
  };

推荐阅读