reactjs - ReactNative 项目性能

Question

我正在编写一个 react-native 应用程序，它列出了来自 API 的一堆数据

（现在是静态的，但数据将是动态的）

class ProfileScreen extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
        GridListItems: [ // Home Screen Cards Data [STATIC]
          { key: "Makeup Artists" , img: 'https://i.ibb.co/Lt88dTg/makeup.png' },
          { key: "Photographers" , img: 'https://i.ibb.co/H4NRnZK/Photographers.png'},
          { key: "Wedding Halls" , img: 'https://i.ibb.co/b2JdtHW/wedding-Hall.png'},
          { key: "Wedding Planners" , img: 'https://i.ibb.co/g95HhKT/image-1.jpg'},
          { key: "Ateliers for Dresses" , img: 'https://i.ibb.co/g4ksBDk/wedding.png'},
          { key: "Hotels" , img: 'https://i.ibb.co/hddLrX6/image-3.png'},
          { key: "Hair Dresser" , img: 'https://i.ibb.co/XbV6xWx/hair-Dresser.png'},
          { key: "Veil Designers" , img: 'https://i.ibb.co/qFtBDNr/veil.png'},
          { key: "Laser & Beauty Centers", img: 'https://i.ibb.co/bFJ8hSn/laser.png' },
          { key: "Dental Clinics" , img: 'https://i.ibb.co/qpsygfV/Dentist.png'},
          { key: "Gym & Fitness" , img: 'https://i.ibb.co/dmVQKbL/gym.png'},
          { key: "SPA" , img: 'https://i.ibb.co/S3g0dz2/spa.png'},
        ]
    };
}
get gradient () { // Home Screen Color Gradient 
  return (
    <LinearGradient
    colors={[colors.background1, colors.background2]}
    startPoint={{ x: 1, y: 0 }}
    endPoint={{ x: 0, y: 1 }}
    style={styles.gradient}>
  </LinearGradient>
  );
}
  render() {
    const height = this.props.navigation.getParam('height');
    return (
      <SafeAreaView style={styles.safeArea}>

      <View style={styles.container}>

          <StatusBar
            translucent={true}
            backgroundColor={'black'}
            barStyle={'light-content'}
          />
          { this.gradient }
          <ScrollView
            style={styles.scrollview}
            scrollEventThrottle={200}
            directionalLockEnabled={true}>

              
              <FlatList
              data={ this.state.GridListItems }
              renderItem={ ({item}) =>
                <TouchableOpacity
                  style={styles.singleCardContainer}
                onPress={() => this.props.navigation.push('ProfileScreen', { height: "6'2", category: item.key })}>
                <Image
                  source={{ uri: item.img }}
                  style={{width: '35%', height: '90%', margin: 5, justifyContent: 'space-around', alignItems: 'flex-start', alignContent: 'flex-start', borderRadius: 5}}
                  />
                  <View style={styles.cardView}>
                    <Text style={styles.CardTextLayout}  > {item.key} </Text>
                    <Text style={styles.CardParagraph} >There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,</Text>
                    <Text style={styles.CardTextLayout}  > Price: $$$</Text>

                  </View>

                </TouchableOpacity>
            }
            numColumns={1}
     />
          </ScrollView>

      </View>
  </SafeAreaView>
    );
  }
}

这是代码呈现的内容：

来自（React 开发者工具）的 App Render Duration 是 330 毫秒！

我在这里做错了什么导致性能大幅下降？

另外，这个代码可以调整吗？
还是有更好的方法来实现这个列表，并且可能渲染适合屏幕的元素，然后在滚动时渲染其余元素？

标签： reactjsreact-native