Question

我正在尝试修改react-redux教程代码。我试图加载本地存储的图像，并将路径保存在对象中。

...
{
    "id": 2,
    "title": "Redux",
    "subtitle": "A State of Mind",
    "img": "../img/3.jpeg",
    "description": "Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test."
  },
...

我遇到以下错误（我已经重启了模拟器几次）

未知的命名模块：＆＃39; ../ img / 3.jpeg＆＃39;

这里是容器（eslint也说 - 意外的require（））

import React, { Component } from 'react';
import {
  Text,
  TouchableWithoutFeedback,
  View,
  LayoutAnimation,
  Image
} from 'react-native';
import { connect } from 'react-redux';
import { CardSection } from './common';
import * as actions from '../actions';

class ListItem extends Component {
  componentWillUpdate() {
    LayoutAnimation.spring();
  }

  renderDescription() {
    const { library, expanded } = this.props;

    if (expanded) {
      return (
        <CardSection>
          <Image
            source={require(library.img)}
            style={styles.imageStyle}
          />
          <View>
            <Text>{library.subtitle}</Text>
            <Text style={{ flex: 1 }}>
              {library.description}
            </Text>
          </View>
        </CardSection>
      );
    }
  }

  render() {
    const { titleStyle } = styles;
    const { id, title } = this.props.library;

    return (
      <TouchableWithoutFeedback
        onPress={() => this.props.selectLibrary(id)}
      >
        <View>
          <CardSection>
            <Text style={titleStyle}>
              {title}
            </Text>
          </CardSection>
          {this.renderDescription()}
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = {
  titleStyle: {
    fontSize: 18,
    paddingLeft: 15
  },
  descriptionStyle: {
    paddingLeft: 10,
    paddingRight: 10
  },
  imageStyle: {
    height: 100,
    width: 100,
    backgroundColor: 'black'
  }
};

const mapStateToProps = (state, ownProps) => {
  const expanded = state.selectedLibraryId === ownProps.library.id;

  return { expanded };
};

export default connect(mapStateToProps, actions)(ListItem);

除了图像外，一切正常 - 只是图像不存在。

Answer 1

你不能动态地要求React Native中的图像，要么是静态的，要么像这样使用uri：

source={{ uri: library.img }}

但考虑到你必须把你的图像放在这条路上

anroid/app/src/main/res/drawable

创建drawable文件夹（如果未创建）。

并更新json文件以删除../

请参阅此问题：https://github.com/facebook/react-native/issues/2481

React-native image - 未知的命名模块＆＃39; ../ img / 2.jpeg＆＃39;

1 个答案: