如何在 Redux 中存储和访问图像

Question

如何在 redux 中存储图像，然后在另一个组件中访问它？我的目标是使用 TextInput 保存图像 url 并在另一个组件中显示实际图像。我不确定如何从 Main 中的 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

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

为了在 组件中加载它，它必须采用以下格式：

data:image/png;base64,

你必须将编码方法添加到的source属性中

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

通过 props 而不是 state 访问它是一个好习惯。

Answer 2

在 redux store 中存储东西的步骤

1. 使用数据（您的图像 URL）发送操作。

2. 创建一个reducer并将数据保存在存储变量中。

3. 连接你想从redux store访问数据的react组件

4. 现在来自 redux 存储变量的数据可以作为道具在您的组件中使用。

---

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

查看this 官方文档。 mapStateToProps 和 mapDispatchToProps 是解决问题的关键。