如何在 React Native 中将无状态函数转换为 class 组件

Question

我是react native新手，一直在寻找如何将这个函数转换成react native中的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>
    )
  }
}

如何在 React Native 中将无状态函数转换为 class 组件

How can I convert stateless function to class component in react native

javascript

react-native

react-native-component