Предварительный просмотр изображения в реагировать родной

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

На втором экране вы определяете обработчик 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

На вашем втором экране тег Image должен иметь source собственность вместо image, как это:

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