如何在本机反应中将无状态 function 转换为 class 组件

Question

我是 react native 的新手，我一直在寻找如何在 react native 中将这个 function 转换为 class 组件。 请我需要帮助将下面的代码转换为反应组件。

import React from 'react';
import { View, Image, ScrollView } from 'react-native';

import styles from './styles';

export default ({captures=[]}) => (
    <ScrollView 
        horizontal={true}
        style={[styles.bottomToolbar, styles.galleryContainer]} 
    >
        {captures.map(({ uri }) => (
            <View style={styles.galleryImageContainer} key={uri}>
                <Image source={{ uri }} style={styles.galleryImage} />
            </View>
        ))}
    </ScrollView>
);

Answer 1

要将其转换为 class 组件，只需将代码移动到 class 组件的渲染方法中，并将对props的引用更改为对this.props的引用。 对于此组件，无需进行其他更改。

export default class Example extends React.Component {
  render () {
    const { captures = [] } = this.props;
    return (
      <ScrollView 
        horizontal={true}
        style={[styles.bottomToolbar, styles.galleryContainer]} 
      >
        {captures.map(({ uri }) => (
          <View style={styles.galleryImageContainer} key={uri}>
            <Image source={{ uri }} style={styles.galleryImage} />
          </View>
        ))}
      </ScrollView>
    )
  }
}