反应本机中的图像预览

Question

我的 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" />

Answer 1

在你的第二个屏幕上，图片标签应该有 source 属性而不是 image，像这样：

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

Answer 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 方法以适应预览，它现在是 objects:

的数组

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

反应本机中的图像预览

Image preview in react-native

uri

react-native

expo

react-native-flatlist

react-native-image-picker