Question

我的本机应用程序中有一个图像上传器，上传图像后，它会导航到另一个屏幕并在那里预览图像，在图像预览屏幕中，有一个输入用于给该图像命名，保存按钮，单击“保存”按钮后，应返回到上一屏幕并显示图像，并在我拥有的平面列表中显示该图像的名称，我设法执行了一些步骤，直到预览图像为止，但是之后我不知道要怎么做。接下来，这是代码：

第一个屏幕：

  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

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

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

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>
    );
}

Answer 2

在第二个屏幕上，图像标签应具有PS C:\>Copy-Item "C:\Logfiles" -Destination "C:\Drawings" -Recurse This command copies the entire contents of the Logfiles directory into the Drawings directory. If the LogFiles directory contains files属性而不是# Get parameter that accepts pipeline input Get-Help Copy-Item -Parameter * | Where-Object {$_.pipelineInput -match 'true'} | Select * # Get cmdlet / function parameter aliases (Get-Command Copy-Item).Parameters.Values | where aliases | select Name, Aliases | Out-GridView -PassThru -Title 'Alias results for a given cmdlet or function.'，如下所示：

source

react-native中的图像预览

2 个答案: