Question

我是React Native的初学者，我想在平面列表中使用for循环来推送所需数据，

    render() {
  return (
  <View style={styles.container}>
  <FlatList
  data={[
  require("./assest/image1.jpg"),
  require("./assest/image2.jpg"),
  require("./assest/image3.jpg"),
  ]}
  renderItem={({ item }) => {
  return <ListItem image={item} />
  }}
  keyExtractor={
  (index) => {return index}
  }
  />
  </View>
  )
}
}

就像使用for循环从状态中推送数组一样

  state ={
  a: [12 , 13 , 14 ,15 , 19 ,21 ]
b: "1"
d = () => {
let c =[];
for (var i =0; i<= this.state.a.length - 1 ; i++) {
c.push( <child text = {this.state.a[i] />);
}
return c;
};

无论如何，在平面列表中是否可以使用循环，或者我们不能在列表中使用平面或列表中的任何循环反应原生。

Answer 1

您可以定义一个state（数组），然后遍历所需的数据并将其推入数组state。然后，将该状态传递到data的{{1}} prop中。

您可以执行以下操作...

FLatlist

在这里，安装组件时，它将循环遍历“图像”对象，并将其推入名为“数据”的数组，并将其存储到import React, { Component } from 'react'; import { View, FlatList } from 'react-native'; import ListItem from '...'; //import the ListItem here export default class App extends Component { constructor(props) { super(props); this.state = { data: [], } } componentDidMount = () => { let data = []; const images = { image1: require("./assest/image1.jpg"), image2: require("./assest/image2.jpg"), image3: require("./assest/image3.jpg"), } images.forEach(image => { data.push(image); this.setState({ data }) }) } render() { return ( <View style={styles.container}> <FlatList data={this.state.data} renderItem={({ item }) => {return <ListItem image={item} />}} keyExtractor={(index) => {return index}} /> </View> ); } }中。然后，该state作为state传递到Flatlist。

请仔细阅读，问我是否还有其他疑问。

在flatlist中用于循环反应本机

1 个答案: