使用Redux保存和访问图像

Question

如何在redux中保存图像以及稍后在另一个组件中访问此图像？我的目标是使用TextInput保存图像URL并在另一个组件中显示实际图像。我不知道如何从Main中的Profile访问图像。这是我在Profile中保存图像的代码：

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

这是我在Main中显示图像的代码：

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

Answer 1

在redux商店中存储内容的步骤

1. 使用数据（您的图像URL）发送操作。
2. 创建reducer并将数据保存在store变量中。
3. 连接要从redux存储中访问数据的react组件
4. 现在，redux store变量中的数据在组件中可用作props。

---

这个问题似乎更像是你想要一个教程，而不是问题的解决方案。

通过this官方文档。 mapStateToProps和mapDispatchToProps是你问题的关键。

Answer 2

如果您的头像相对较小，您可能希望将其保存为Base64格式，并在Redux商店中使用它

要在<Image>组件中加载它，它必须采用以下格式：

data：image / png; base64，<你的base64图像>

您必须将编码方法添加到<Image>的source属性

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

通过道具而不是状态访问它将是一个很好的做法。