在 React Native 中，平面列表的最佳用例是什么？

Question

我试图让我的函数从 url 填充文本，但它没有产生任何输出 我想添加从 url 或 urls 获取的文本，并将其填充到 react native flatlist 中，这是我的尝试。

import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import * as React from "react"
import { useEffect } from "react";
import { Alert, FlatList, SafeAreaView, StyleSheet, Text } from "react-native";
import { color } from "react-native-reanimated";

const Drawer = createDrawerNavigator();

export function m1() {

  const npop = new Number

  for (i in new Range(0, 999999)) {

    const header = ['https://' + i + '?lang=en-US&region=US&device=desktop']

    fetch(header.find < String > (" ", 0, -1), {
      mode: 'no-cors',
      headers: {
        'Content-Type': 'application/json',
      }
    }).then((response) => document.querySelectorAll("td, a").item(response.text))

    return (
      <SafeAreaView onLayout={() => m1()}>
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={() => { Sports() }}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={() => { Sports() }}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={() => { Sports() }}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={() => { Sports() }}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={() => { Sports() }}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={() => { Sports() }}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={() => { Sports() }}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={() => { Sports() }}
        />
      </SafeAreaView>
    );

  }
}




export class m2 extends React.Component {
  state = { data: [""] }
  componentDidMount() {
    const header = ['https://', 'https://', 'https://']
    return <Text>{fetch(header.find < String > (" ", 0, -1), {
      mode: 'no-cors',
      headers: {
        'Content-Type': 'application/json',
      }
    }).then((response) => document.querySelectorAll("span, a").item(response.text))}</Text>
  }

  render() {
    const header = ['https://', 'https://', 'https://']
    return (
      <SafeAreaView onLayout={() => this.componentDidMount()}>
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={this.componentDidMount()}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={this.componentDidMount()}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={this.componentDidMount()}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={this.componentDidMount()}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={this.componentDidMount()}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={this.componentDidMount()}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={this.componentDidMount()}
        />
        <FlatList
          style={style.data}
          data={fetch(header.find < String > (" ", 0, -1), {
            headers: {
              'Content-Type': 'application/json',
            }
          }).then((response) => document.querySelectorAll("td, a").item(response.text))}
          renderItem={this.componentDidMount()}
        />
      </SafeAreaView>
    );
  }
}



export class m3 extends React.Component {
  state = {
    snum: new Number,
    data: [""],
  }

  componentDidMount() {

    for (this.state.snum in new Range(this.state.snum, 999999)) {

      const npop = this.state.snum + 1
      const header = ['https://' + npop]
      return fetch(header.find < String > (" ", 0, -1), {
        mode: 'no-cors',
        headers: {
          'Content-Type': 'application/json',
        }
      }).then((response) => document.querySelectorAll("span, a").item(response.text))
    }
  }

  render() {
    for (this.state.snum in new Range(this.state.snum, 999999)) {
      const npop = this.state.snum + 1
      const header = ['https://' + npop]
      return (
        <>
          <SafeAreaView onLayout={() => this.componentDidMount()}>
            <FlatList
              style={style.data}
              data={fetch(header.find < String > (" ", 0, -1), {
                headers: {
                  'Content-Type': 'application/json',
                }
              }).then((response) => document.querySelectorAll("td, a").item(response.text))}
              renderItem={this.componentDidMount()}
            />
            <FlatList
              style={style.data}
              data={fetch(header.find < String > (" ", 0, -1), {
                headers: {
                  'Content-Type': 'application/json',
                }
              }).then((response) => document.querySelectorAll("td, a").item(response.text))}
              renderItem={this.componentDidMount()}
            />
            <FlatList
              style={style.data}
              data={fetch(header.find < String > (" ", 0, -1), {
                headers: {
                  'Content-Type': 'application/json',
                }
              }).then((response) => document.querySelectorAll("td, a").item(response.text))}
              renderItem={this.componentDidMount()}
            />
            <FlatList
              style={style.data}
              data={fetch(header.find < String > (" ", 0, -1), {
                headers: {
                  'Content-Type': 'application/json',
                }
              }).then((response) => document.querySelectorAll("td, a").item(response.text))}
              renderItem={this.componentDidMount()}
            />
            <FlatList
              style={style.data}
              data={fetch(header.find < String > (" ", 0, -1), {
                headers: {
                  'Content-Type': 'application/json',
                }
              }).then((response) => document.querySelectorAll("td, a").item(response.text))}
              renderItem={this.componentDidMount()}
            />
            <FlatList
              style={style.data}
              data={fetch(header.find < String > (" ", 0, -1), {
                headers: {
                  'Content-Type': 'application/json',
                }
              }).then((response) => document.querySelectorAll("td, a").item(response.text))}
              renderItem={this.componentDidMount()}
            />
            <FlatList
              style={style.data}
              data={fetch(header.find < String > (" ", 0, -1), {
                headers: {
                  'Content-Type': 'application/json',
                }
              }).then((response) => document.querySelectorAll("td, a").item(response.text))}
              renderItem={this.componentDidMount()}
            />
            <FlatList
              style={style.data}
              data={fetch(header.find < String > (" ", 0, -1), {
                headers: {
                  'Content-Type': 'application/json',
                }
              }).then((response) => document.querySelectorAll("td, a").item(response.text))}
              renderItem={this.componentDidMount()}
            />
          </SafeAreaView >
        </>
      );
    }
  }
}

export default function App() {
  function sendNotification() {
    useEffect(() => {
      setInterval(() => {
        <>
          <m2 />
          <m3 />
        </>
        m1()
        Alert.alert("Newly Parsed Content ")
      }, 300);
    }, []);
  }

  return (
    <NavigationContainer onLayout={() => sendNotification()}>
      <Drawer.Navigator initialRouteName="m1">
        <Drawer.Screen name="m1" component={m1} />
        <Drawer.Screen name="m2" component={m2} />
        <Drawer.Screen name="m3" component={m3} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}


const style = StyleSheet.create({
  data: {
    width: "50",
    height: "100%",
    marginBottom: "5%",
    marginTop: "5%",
    marginLeft: "5%",
    marginRight: "5%",
    backgroundColor: '#f9c2ff',
    padding: 50,
    color: '#d5f0ee'
  }
})

我试图将文本视图与初始代码结合起来，但它仍然没有解决我的问题。

Answer 1

一种更简单的方法是将您的 renderItems 映射到它自己的函数

const renderItem = ({item}) => (<Text >{item}</Text>)

然后从那里渲染平面列表

<FlatList data={lists} renderItem={renderItem}/>

您只需要一个 flatlist 变量，因为它将全部附加到列表中。我也不知道我只是个新手，但今天似乎没有人回应任何人……如果那更合适，也许可以查看部分列表