Сохранение и доступ к изображениям с помощью Redux - PullRequest
Новая
       41

Сохранение и доступ к изображениям с помощью Redux

0 голосов
/ 21 ноября 2018

Как я могу сохранить изображение в редукторе и позже получить доступ к этому изображению в другом компоненте?Моя цель - использовать TextInput для сохранения URL-адреса изображения и отображения фактического изображения в другом компоненте.Я не уверен, как получить доступ к изображению из профиля в Main.Вот мой код для сохранения изображения в профиле: 

import React from 'react';
import { StyleSheet, TextInput, View, Button, Vibrate } from 'react-native';

import { connect } from 'react-redux';
import {saveProfile} from '../redux/actions';

import Settings from './Settings';

class Profile extends React.Component {

  saveProfile=(yourProfile)=>{
    var saveProfile=this.props.yourProfile
    this.props.dispatch(saveProfile(yourProfile));
  }

  handleName=(name)=>{
    this.props.dispatch(saveProfile(name));
  }

  handlePhone=(phone)=>{
    this.props.dispatch(saveProfile(phone));
  }

  handleEmail=(email)=>{
    this.props.dispatch(saveProfile(email));
  }

  handleAvatar=(avatar)=>{
    this.props.dispatch(saveProfile(avatar));
  }

  handleVibrate = (vibrate) => {
    if (vibrate===true){
      Vibration.vibrate(DURATION); 
    } else {
      Vibration.cancel()
    } this.setState({
      vibrate
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          placeholder="name"
          onChangeText={this.handleName}
        />
        <TextInput
          placeholder="phone"
          keyboardType="phone-pad"
          onChangeText={this.handlePhone}
        />
        <TextInput
          placeholder="email"
          keyboardType="email-address"
          onChangeText={this.handleEmail}
        />
        <TextInput
          placeholder="avatarUrl"
          keyboardType="url"
          onChangeText={this.handleAvatar}
        />
        <Switch
          value={this.state.vibrate}
          onValueChange={this.handleVibrate}
        />
        <Button
          title="Save"
          onPress={this.saveProfile}
        />
      </View>
    );
  }
}

function mp(state){
  return {
    yourProfile:state.saveProfile.yourProfile
  }
}

export default connect(mp)(yourProfile);

А вот мой код для отображения изображения в основном: 

import React from 'react';
import { StyleSheet, Text, Image, View, Vibrate } from 'react-native';

import Settings from './Settings';
import Profile from './Profile';

import {connect} from 'react-redux';
import {saveProfile, saveSettings} from '../redux/actions';

class Main extends React.Component {
  state={
    avatar: 
  }

  render() {
    return (
      <View style={styles.container}>
        <Image
          source={this.state.avatar}
          style={{width: 300, height: 300}}
        />
        <Text>{name}</Text>
        <Text>{phone}</Text>
        <Text>{email}</Text>
        <Settings />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

function mp(state){
  return{

  }
}

export default connect(mp)(Main);

Ответы [ 2 ]

0 голосов
/ 19 марта 2019

Если ваш аватар относительно мал, вы можете сохранить его в формате Base64 и использовать его в своем магазине Redux

Чтобы загрузить его в компоненте , он должен быть вэтот формат:

данные: изображение / PNG; base64,

Вы должны добавить метод кодирования к свойству источника 

<Image
   source= {uri:'data:image/png;base64,' + {this.state.avatar}}
   style={{width: 300, height: 300}}
/>

И было бы неплохо получить к нему доступ через реквизит, а не через состояние.

0 голосов
/ 21 ноября 2018

Действия по сохранению чего-либо в хранилище редуксов

  1. Отправка действия с данными (URL вашего изображения).

  2. Создайте редуктор и сохраните данные в переменной хранилища.

  3. Подключите компонент реагирования, в котором вы хотите получить доступ к данным из хранилища редуксов

  4. Теперь данные из переменной хранилища резервов доступны в вашем компоненте в виде реквизитов.

Этот вопрос больше похож на то, что вам нужно руководство, а не решение дляпроблема.

Просмотрите эту официальную документацию.mapStateToProps и mapDispatchToProps - ключ к вашей проблеме.

...