如何在本機反應中將無狀態 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>
    )
  }
}