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

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

0 голосов
/ 11 декабря 2018

У меня есть приложение для загрузки изображений в моем приложении-адаптере, когда вы загружаете изображение, оно перемещает вас на другой экран и просматривает изображение там, на экране предварительного просмотра изображения есть ввод для указания имени для этого изображения иКнопка «Сохранить», при нажатии на кнопку «Сохранить» она должна вернуться к предыдущему экрану и отобразить изображение и его имя там в имеющемся у меня плоском списке, мне удалось выполнить шаги до предварительного просмотра изображения, но после этого я не знала, что делать.сделайте следующее, вот код:

Первый экран: 

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

Ответы [ 2 ]

0 голосов
/ 12 декабря 2018

Насколько я понимаю, вы пытаетесь отправить данные обратно со второго экрана на первый.Одним из решений является создание внутри первого экрана функции, которую вы передаете на второй экран.

Таким образом, вы объявляете функцию на первом экране, где вы обновляете состояние с заголовком: 

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>
    );
}
0 голосов
/ 12 декабря 2018

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

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

...