react-native 中的图像预览

Posted 2023-02-19

【中文标题】react-native 中的图像预览

【英文标题】：Image preview in react-native

【发布时间】：2019-05-12 20:05:13

【问题描述】：

我的 react-native 应用程序中有一个图片上传器，一旦您上传图片，它会将您导航到另一个屏幕并在那里预览图片，在图片预览屏幕中有一个输入用于为该图片命名和一个保存按钮，当单击保存按钮时，它应该返回上一个屏幕并在我拥有的平面列表中显示图像及其名称，我设法执行这些步骤，直到预览图像但之后我不知道该做什么下一步，代码如下：

首屏：

  state = 
    image: null,
    previews: []
  ;

  _pickImage = async () => 
    await Permissions.askAsync(Permissions.CAMERA_ROLL);
    const navigate = await this.props.navigation;

    let result = await ImagePicker.launchImageLibraryAsync(
      allowsEditing: false,
      aspect: [4, 4],
    );

    navigate( 'ImagePreview',  uri : result.uri  );

    if (!result.cancelled) 
      this.setState( image: result.uri );
    
  ;

  _keyExtractor (item, index) 
      return index.toString();
    

     _renderItem ( item, index ) 
      return (
        <View>
        <Image source=require('')/>
        <Text>Image title</Text>
        </View>
        );
    

<FlatList style= flex: 0.5 
  data=this.state.previews
  keyExtractor=this._keyExtractor.bind(this)
  renderItem=this._renderItem.bind(this)
  numColumns=2
/>

第二屏：

const uri = navigation.getParam('uri');
<Image source=uri:uri style=width: 200, height: 200 />
<Button title="Save" />

【问题讨论】：

@Andrew 你能帮忙吗？

我不确定您的问题是什么。预览图不显示在第二屏还是返回导航的问题？

@Niels Ladekarl 它会显示出来，但在显示后我需要返回第一个屏幕并在平面列表中显示它的标题

【参考方案1】：

在您的第二个屏幕上，图像标签应该有一个source 属性而不是image，如下所示：

<Image source=uri:uri style=width: 200, height: 200 />

【讨论】：

您是否检查了uri 参数是否正确进入组件？

【参考方案2】：

据我了解，您正在尝试将数据从第二个屏幕发送回第一个屏幕。一种解决方案是在您传递到第二个屏幕的第一个屏幕内创建一个函数。

因此，您在第一个屏幕中声明一个函数，并在其中使用标题更新状态：

returnTitle(uri, title) 
    const previews = this.state;
    previews.push(uri, title);
    this.setState(previews);

当你导航到第二个屏幕时，你会传递这个函数：

navigate('ImagePreview',  
    uri: result.uri, 
    returnTitle: this.returnTitle.bind(this)
);

在您的第二个屏幕中，您为您的 Button 定义一个 onPress 处理程序，您可以在其中调用 returnTitle 函数并返回：

onSavePress = () => 
    const title = this.state; // Not sure where you store the title
    const navigation = this.props;
    const uri = navigation.getParam('uri');
    navigation.state.params.returnTitle(uri, title);
    navigation.goBack();

记得从您的输入中获取标题。如果存储在组件状态，代码不会显示。

现在在第一个组件中更改您的 _renderItem 方法以适应现在是对象数组的预览：

_renderItem ( item, index ) 
    return (
        <View>
            <Image source=uri: item.uri/>
            <Text>item.title</Text>
        </View>
    );