Question

我对React Native很陌生，并且陷入了试图利用Instagram的API的个人项目。我目前正在使用forEach尝试为数组中的每个对象返回一个Image，而且我似乎无法显示Image。当我在mediaPrinter函数中执行console.log（images.images.thumbnail.url）时，我确实看到所有的URL都被记录了。

以下是API调用：

export default function ApiCall() {
  return fetch(url)
      .then((response) => {
        return response.json()
      })
      .then((json) => {
        return json.data
      })
      .catch((error) => {
        console.log(error)
      })
}

其余的相关代码：

mediaPage() {
  return <ScrollView style={styles.scrollBody}>
      <Text style={styles.welcome}>
          Browse Through Our Moments
      </Text>
      <View style={styles.imageRow}>
        {this.mediaHandler()}
      </View>
    </ScrollView>
}

mediaHandler() {
  ApiCall()
    .then((data) => {
      this.mediaPrinter(data)
    })
    .catch((error) => {
      console.log(error)
    })
}

mediaPrinter(array) {
  array.forEach(function(images) {
    return <Image
      source={{uri: images.images.thumbnail.url}}
      style={{width: 138, height: 138}} />
  })
}

我还想知道是否有办法使用React Native当前提供的资源响应性地调整图像大小。

Answer 1

这应该做tirck：

class renderImages extends Component {
  constructor () {
    super()
    this.state = {
      images: []
    }
  }
  
  componentDidMount () {
    this.mediaHandler()
  }
  
  mediaPage() {
  return <ScrollView style={styles.scrollBody}>
      <Text style={styles.welcome}>
          Browse Through Our Moments
      </Text>
      <View style={styles.imageRow}>
        {this.mediaPrinter(this.state.images)}
      </View>
    </ScrollView>
}

mediaHandler() {
  ApiCall()
    .then((data) => {
    this.setState({images: data})
      //this.mediaPrinter(data)
    })
    .catch((error) => {
      console.log(error)
    })
}

mediaPrinter(array) {
  return array.map(function(images, index) {
    // don't put your key as index, choose other unique values as your key.
    return <Image
      key={index}
      source={{uri: images.images.thumbnail.url}}
      style={{width: 138, height: 138}} />
  })
}

}

您在<View style={styles.imageRow}></View>内调用的函数应该返回要呈现的jsx。正如您所看到的，在您的方法中，您什么都不返回。

在上面的解决方案中，我设置了medialHandler从instagram获取数据时的状态，这会触发重新渲染，并且使用instagram照片数据数组再次调用mediaPrinter函数，因此它会被渲染。

Answer 2

mediaHandler()返回承诺。 React对承诺一无所知。因此，反应无法呈现您的图像列表。

你不应该混合任何非ui逻辑和渲染内部组件。这是不好的做法。 React ui组件应该尽可能愚蠢。组件应仅根据传递的数据props（在您的情况下为图像列表）呈现ui并触发某些事件（例如图像点击）。调用API适用于代码的另一部分。

如何编写代码有很多可能性。其中之一就是＆＃34;聪明的概念＆＃34; （容器）和＆＃34;愚蠢的＆＃34; （演示）组件。

在您的情况下，演示组件将是：

class ImageList extends React.Component {
  render() { 
    return <ScrollView style={styles.scrollBody}>
             <Text style={styles.welcome}>
               Browse Through Our Moments
             </Text>
             <View style={styles.imageRow}>
               {this.renderImages(this.props.images)}
             </View>
           </ScrollView>;
  }

  renderImages(images) {
    return images.forEach(function(image) {
      return <Image
        source={{uri: image.url}}
        style={{width: 138, height: 138}} />
    })
  }
}

容器组件：

class ImageListContainer extends React.Component {
  constructor() {
    super();
    this.state = { images: [] }
  }

  componentDidMount() {
    ApiCall()
      .then((data) => {
         ...
         this.setState({images: images})
      })
  }

  render() {
    return <ImageList images={this.state.images} />;
  }
}

您可以在https://medium.com/@learnreact/container-components-c0e67432e005#.r8c3p0540和https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.65028sqwh

找到更多信息

另一种选择是使用redux，flux，rx或任何你想要的。 React仅提供表示层。

使用React Native为阵列中的每个对象打印图像

2 个答案: