我如何在ScrollView中动态呈现一些代码？

Question

我正在我的render（）函数中动态生成View组件。

该列表可能长于我的屏幕大小。我如何在ScrollView中包围我的return语句？

   render() {

        if (this.state.loading) {
            return (
                <View style={styles.container}>
                    <Text>Chargement</Text>
                    <ActivityIndicator size="large" />
                </View>
            );
        }

        return Object.entries(this.state.results).map(([key, value]) => {
            console.log(key, value)
            return (
                <View key={key} style={styles.container}>
                    <Text>{key}</Text>
                    <Text>{JSON.stringify(value.reps)}</Text>
                    <Text>{JSON.stringify(value.weight)}</Text>
                    <Button title="delete">Delete</Button>
                </View>
            )
        })
    }
}

Answer 1

您可以这样做：

render(){
  return(
  <ScrollView>
  {
    Object.entries(this.state.results).map(([key, value]) => {
      console.log(key, value)
      return (
          <View key={key} style={styles.container}>
              <Text>{key}</Text>
              <Text>{JSON.stringify(value.reps)}</Text>
              <Text>{JSON.stringify(value.weight)}</Text>
              <Button title="delete">Delete</Button>
          </View>
      )
  })
  }
  </ScrollView>
 )

}