Question

自从我开始使用它的第一天起，我就遇到了本机反应的问题，但仍然没有找到答案。

当Image的uri来源处于状态且状态发生变化时，尽管uri并没有发生变化，但图像仍会重新呈现。

以下是一个直播此问题的视频： Video that show the issue

这是我如何使用图像组件的示例：

<Image source={{ uri: this.props.portada.uri }} style={{ width: 20, height: 20 }} />

我正在使用redux进行状态管理。

（这完全发生在我的应用程序中依赖其uri的所有图像中）

以下是您在视频中看到的主要用户界面：

render() {
const LogoButton = () => {
  if (this.props.logo.uri) {
    return (
      <TouchableOpacity onPress={() => this.showActionSheet('logo')}>
        <Image source={{ uri: this.props.logo.uri }} style={{ width: 80, height: 80, marginTop: 5, borderRadius: 40 }} />
      </TouchableOpacity>
    );
  }
  return (
    <TouchableOpacity style={{ borderRadius: 100 }} onPress={() => this.showActionSheet('logo')}>
      <Image source={require('../8-images/LogoUploadIcon.png')} style={{ width: 75, height: 75, marginTop: 5 }} />
    </TouchableOpacity>
  );
};

const PortadaButton = () => {
  if (this.props.portada.uri) {
    return (
      <TouchableOpacity onPress={() => this.showActionSheet('portada')}>
        <Image source={{ uri: this.props.portada.uri }} style={{ width: 188, height: 100, marginTop: 5, borderRadius: 4 }} />
      </TouchableOpacity>
    );
  }
  return (
    <TouchableOpacity style={{ borderRadius: 100 }} onPress={() => this.showActionSheet('portada')}>
      <Image source={require('../8-images/PortadaUploadIcon.png')} style={{ width: 188, height: 100, marginTop: 5, borderRadius: 4 }} />
    </TouchableOpacity>
  );
};
return (
  <View style={{ flex: 1 }}>
    <Header type="back" title="Identificación" onPress={() => this.onSaveNewIdentity()} button="Guardar" backLink={() => this.props.navigation.goBack()} />
    <ActionSheet
      title="Elige logo desde"
      ref={o => this.ActionSheetUno = o}
      options={['Camara', 'Galería de fotos', 'Cancelar']}
      cancelButtonIndex={2}
      onPress={(index) => this.logoPicker(index)}
    />
    <ActionSheet
      ref={a => this.ActionSheetDos = a}
      title="Elige portada desde"
      options={['Camara', 'Galería de fotos', 'Cancelar']}
      cancelButtonIndex={2}
      onPress={(index) => this.portadaPicker(index)}
    />
    <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1, paddingBottom: 500 }}>
      <Input
        missing={this.props.missing.nombre}
        title="Identidad"
        label="Nombre del restaurant"
        missingLabel="Falta ingresar el nombre del restaurant"
        placeholder="Ej: Editha's Kitchens"
        value={this.props.nombre}
        onChangeText={(text) => this.onAddRestoName(text)}
      />

      <Divider marginVertical={15} marginHorizontal={15} />

      <Subhead title="Visibilidad" color={missingAnItem(this.props.missing.logo || this.props.missing.portada)} />
      <Caption1>Escoge como te verán nuestros usuarios</Caption1>
      <View style={{ flexDirection: 'row', marginHorizontal: 15, marginTop: 5 }}>
        <View>
          <Caption1 marginHorizontal={0.01} color={missingAnItem(this.props.missing.logo)}>Logo:</Caption1>
          <LogoButton />
        </View>

        <View style={{ marginLeft: 35 }}>
          <Caption1 marginHorizontal={0.01} color={missingAnItem(this.props.missing.portada)}>Portada:</Caption1>
          <PortadaButton />
        </View>
      </View>

      <Divider marginVertical={15} marginHorizontal={15} />

      <Subhead title="Nacionalidad" color={missingAnItem(this.props.missing.origen)} />
      <Caption1 color={missingAnItem(this.props.missing.origen)}>{(!this.props.missing) ? 'Escoge la nacionalidad que mejor define el origen de tu comida' : 'Debes escoger un origen'}</Caption1>

      <FlatList
        style={{ marginVertical: 5, marginHorizontal: 10 }}
        numColumns={3}
        data={this.props.nacionalidades}
        renderItem={({ item }) => {
          const { origen } = this.props;
          const containerColor = (item.selected || item.nacionalidad == origen) ? '#151E3F' : 'rgba(0, 0, 0, 0.2)';
          const HeadlineColor = (item.selected || item.nacionalidad == origen) ? 'white' : null;
          return (
            <TouchableOpacity style={{ flex: 1 }} onPress={() => this.selectNacionalidadesHandler(item.nacionalidad)}>
              <View style={{ backgroundColor: containerColor, margin: 5, paddingVertical: 5, borderRadius: 4, alignItems: 'center' }}>
                <Subhead color={HeadlineColor} title={item.nacionalidad} />
              </View>
            </TouchableOpacity>
          );
        }}
        keyExtractor={(item, index) => index.toString()}
      />
    </ScrollView>
  </View>
);

} }

这将从mapStateToProps中获取uri道具：

const mapStateToProps = state => {
  return {
    user: state.auth.user,
    nacionalidades: state.perfil.nacionalidades,
    origen: state.perfil.origen,
    logo: state.perfil.logo,
    portada: state.perfil.portada,
    nombre: state.perfil.nombre,
    missing: state.perfil.missing,
    perfil: state.perfil.perfil
  };
};

这是商店中状态的结构：

const INITIAL_STATE = {
  nombre: '',
  origen: '',
  logo: {
    uri: '',
    base64: ''
  },
  portada: {
    uri: '',
    base64: ''
  },
}

通过此设置，当我使用位于设备中的uri时，例如在添加照片时，我没有问题。 问题从uri属性作为网址开始。

很抱歉最初没有发布代码，我认为这是不需要它的常见错误。

尽管uri没有，但每次状态更改时，图像uri都会重新渲染

0 个答案: