如何在react-native中执行水平ListView或FlatList
在React Native中执行水平ListView或FlatList可以通过以下步骤实现：
- 导入所需的组件和库：import React from 'react'; import { View, FlatList } from 'react-native';
- 创建一个数据源数组，用于渲染列表项：const data = [ { id: '1', title: 'Item 1' }, { id: '2', title: 'Item 2' }, { id: '3', title: 'Item 3' }, // 添加更多的数据项... ];
- 创建一个自定义的列表项组件，用于渲染每个数据项：const ListItem = ({ item }) => { return ( <View style={styles.item}> {/* 渲染列表项的内容 */} </View> ); };
- 在主组件中使用FlatList组件来渲染水平列表：const App = () => { return ( <View style={styles.container}> <FlatList data={data} renderItem={ListItem} keyExtractor={(item) => item.id} horizontal={true} // 设置为水平布局 /> </View> ); };
- 样式化列表项和主组件：const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 50, }, item: { backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, });
以上步骤中，我们使用了React Native的FlatList组件来渲染水平列表。通过设置horizontal属性为true，可以将列表项水平排列。同时，我们还创建了一个自定义的列表项组件ListItem，用于渲染每个数据项的内容。
推荐的腾讯云相关产品：腾讯云移动开发平台（https://cloud.tencent.com/product/mwp）
请注意，以上答案仅供参考，具体实现方式可能因项目需求和开发环境而有所不同。
相关·内容
2回答
为什么react钩子不支持纯组件或shouldComponentUpdate函数？
reactjs、react-native、react-hooks
我想实现flatlist的多选功能。我直接在官方网站上修改了这个例子。官方网站地址是：。因为列表中有很多项，所以我想使用shouldComponentUpdate来防止过度呈现项。但是我发现react钩子编写方法不能实现多选，它不能保存选中的状态，但是类编写方法可以实现多选，原因是什么？FlatList项目的源码如下：
import {StyleSheet, Text, TouchableOpacity} from 'react-native';
import React, {Component} from 'react';
class Item ex
浏览 1提问于2020-06-17得票数 0
2回答
在平面列表中的每3项添加一个分隔符- React本机
javascript、react-native、react-native-flatlist、separator、flatlist
我怎样才能为平面表中的每三个项目添加一个分隔符？我可以在每1项之后添加一个分隔符。我没找到那个道具。这是我的密码：
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text} from 'react-native';
const DATA = [
{
id: 1,
title: 'Item 1',
},
{
id: 2,
title: '
浏览 5提问于2021-09-10得票数 1
回答已采纳
2回答
render未返回任何内容。这通常意味着缺少返回语句
javascript、react-native、jsx、render
我试图从一个json文件中获取数据到我的Lesson1.js中，它应该做的是在我点击主屏幕上的按钮之后，它必须转到Lesson1.js页面，但在点击它之后，我得到了错误消息: Lesson1(...)render未返回任何内容。这通常意味着缺少返回语句。或者，若要不呈现任何内容，请返回null
import React, {Component, useState} from 'react';
import { ActivityIndicator, StyleSheet, View, Text, ButtonSafeAreaView,TouchableOpacity,FlatLi
浏览 14提问于2020-05-14得票数 0
1回答
为什么我的FlatList不滚动反应本地？
reactjs、react-native
我已经看到了很多关于FlatList的答案，没有滚动的Reactive原住民，但似乎没有一个答案是有效的。
答案通常是将flex: 1添加到父程序中，但是这里有一个例子，它仍然没有滚动。
，但是一定要选择iOS或Android。它确实为网页滚动。
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [
{
id: "bd7acbea-c
浏览 7提问于2022-04-06得票数 0
回答已采纳
1回答
无法在模态中重命名FlatList
javascript、react-native、modal-dialog
*我的目标是能够在每次调用generateNewTicket()时重新修改数据。但是，重呈现只在我触摸票证*时发生。
我尝试使用tryOut，我确信我不知道如何改变状态，但它没有起作用。
如果我将modalVisible设置为false，然后立即将其设置为true，则工作正常，但是系统首先从模式中出来，然后我需要单击再次查看该模式。
import React, { useState } from 'react';
import {
SafeAreaView,
View,
TouchableOpacity,
TouchableHighlight,
FlatLi
浏览 4提问于2020-06-05得票数 0
1回答
如何根据在react本机中呈现的项数设置项的宽度
react-native、width、styling
我正在渲染来自循环值的扁平列表项目，它当前正在渲染5个项目，我想要根据呈现的数量来更改这些项目的宽度，例如，如果我想呈现10个项目，宽度将相应地调整。我尝试了不同的方法，但似乎都不起作用。ps:我的目标是在不需要滚动的情况下渲染这些项目，我希望这10个项目完全显示出来 到目前为止，我的代码如下： import React, { useEffect, useState } from 'react';
import { View, FlatList, Text, TouchableOpacity } from 'react-native';
import
浏览 12提问于2021-07-05得票数 0
回答已采纳
1回答
如何在expo react native中将国家/地区列表显示为网页
react-native、expo
我是react native expo的初学者，正在创建我的第一个项目。我可以制作一个扁平列表，到目前为止，应用程序运行得很好。
然而，现在我需要做这样的东西，
作为新手，我不确定从哪里开始，似乎使用了webview，但我不确定如何将flatview放到webview中，或者我完全走错了路？
这是我到目前为止所编写的代码，
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
浏览 0提问于2020-07-30得票数 0
1回答
在react中使用单独的文件创建虚拟化列表
reactjs、react-native、react-hooks、react-virtualized
我在app.js中创建了一个待办事项列表应用程序，在VirtualizedList.js中创建了一个虚拟化列表，但是尽管我正确地将其导入到app.js中，但没有显示任何虚拟化列表代码。 这是VirtualizedList.js代码。 import React from 'react';
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text,
StatusBar } from 'react-native';
const DATA = [];
const getItem = (data,
浏览 16提问于2021-08-04得票数 0
3回答
在FlatList内部响应本机模态不工作
react-native、react-native-flatlist、simplemodal
.我得到问题的反应，本机模式，点击变更平面表文本。
我想当我点击模态确定按钮接受文本在平面列表中更改为挂起
这是我的密码。
.我得到问题的反应，本机模式，点击改变平板表按钮的颜色。
我想当我点击模态确定按钮接受文本在平面列表中更改为挂起
这是我的密码。
..。我是新来的反应本土我尝试了很多次，但失败了，请帮助.
import React from 'react';
import { SafeAreaView, View, FlatList,Pressable, StyleSheet, Text, StatusBar } from 'react-native'
浏览 9提问于2022-10-06得票数 0
2回答
从React本机的列表中搜索
list、react-native、search
我只想知道如何才能使搜索功能在反应本土化。我有一个非常大的文本列表(在本地js文件中)和文本输入空间。我想成为可能，当用户键入一些东西，他们可以找到他们想要的从下面的列表。这是我的应用程序代码和屏幕截图。我是新编程的，所以请使用 =)
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar, TextInput } from 'react-native';
import {DATA} from "../Data/AbrD
浏览 2提问于2022-04-11得票数 0
回答已采纳
1回答
反应本机元素listItem.accordion
javascript、react-native、react-native-elements
//我在FLatlist的帮助下呈现API响应，但当我按下展开选项时，它将打开所有手风琴.
import { View, Text, StyleSheet, FlatList } from 'react-native'
import React, { useState } from 'react'
import SearchBox from '../../components/SearchBox/SearchBox'
import { ListItem, Icon, Slider } from '@rneui/themed'
im
浏览 13提问于2022-08-05得票数 0
1回答
响应本机Flatlist官方文档而不是呈现
react-native
我以官方React本机文档中的示例为例进行应用，只更改了一些根本不重要的内容，并添加了<Text>，以确保组件在父组件中正确导出。
使用List problem的部分显示，但列表本身没有显示。我在Scollview之前用映射DATA测试了Flatlist，但是Flatlist不起作用。
import React from "react";
import { View, Text, SafeAreaView, FlatList, StyleSheet } from "react-native";
function Item({ title }) {
浏览 0提问于2019-11-05得票数 0
回答已采纳
1回答
为什么我在React-Native中的FlatList没有更新，即使在添加after数据之后也是如此？
javascript、typescript、react-native、mobile、react-native-flatlist
在过去的几个小时里，我试着做一个简单的列表，你可以通过在文本框中输入一些东西并按下按钮来扩展它。但它不会更新我的FlatList，即使更改了额外数据的内容也是如此。我做错了什么？请不要介意updateTask上的硬编码ID，它只用于调试。
import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet, FlatList } from 'react-native'
const DATA = [
{
id: &#
浏览 0提问于2020-06-02得票数 1
1回答
如何减少水平平面表中项目之间的间距
android、reactjs、react-native、react-native-flatlist、native-base
我使用React native的水平FlatList，并在其中使用ListItem和Card of Native base来呈现我的列表项。它可以工作，但项目之间的空间太大，我不能减少它。 这是FlatList： <FlatList
horizontal data={this.props.data}
showsHorizontalScrollIndicator={false}
keyExtractor={item => item.title}
renderItem={this.renderItem}
/> 这是renderItem： renderI
浏览 7提问于2019-01-17得票数 4
回答已采纳
2回答
如何优化FlatList中的反应本地
reactjs、react-native
你能告诉我如何在反应本土化的情况下优化这个单张表吗？我的意思是，这个应用程序不会呈现整个数据列表，而只是其中的一小部分--例如10项--然后当用户向下滚动时，它会从列表中加载更多的数据？
这就是密码
import React, {useState, useEffect} from 'react';
import {
SafeAreaView,
StatusBar,
StyleSheet,
Text,
View,
FlatList,
TextInput,
} from 'react-native';
import {newdata} f
浏览 7提问于2022-04-20得票数 0
1回答
反应本机:分区按钮滚动向上。
react-native、scroll
我正在学习反应本地应用程序。我从开源应用中找到了一个关于FlatList的演示应用程序，用户可以在这里点击屏幕的下边和屏幕的上方。我希望在SectionList中实现相同的逻辑，根据React本机文档，FlatList和SectionList几乎有相同的道具。但是，当我尝试实现向下滚动和向上按钮逻辑SectionList时，它不起作用。这让我犯了错误。下面是他们使用的，FlatList向下滚动和向上滚动逻辑。
这里是我对SectionList 和 的失败尝试
import React from "react";
import {
StyleSheet,
Text,
浏览 8提问于2022-11-23得票数 1
回答已采纳
2回答
操作已发出，状态已更新，但未呈现UI组件。
react-native、react-redux、action、render、dispatch
谁能在我的问题上支持:分派一个动作确实会像预期的那样改变状态。但是，分发问题的组件不会重新呈现。当我简单地保存组件时，它当然会重新呈现并显示desiree effekt。
这是我的档案：
actions.js
export const TOGGLE_PRODUCT = "TOGGLE_PRODUCT";
export const INCREMENT = "INCREMENT";
//ACTION CREATER FUNCTIONS
export const toggleProduct = (id) => {
return {
type: TO
浏览 3提问于2020-10-03得票数 0
2回答
如何在选择列表项时添加弹出模式react native并显示其详细信息
javascript、reactjs、react-native、modal-dialog、popup
正如标题所说，我需要为要显示的选定大小的每个列表项创建一个模式弹出窗口。我正在使用react-native-popup-对话框，但没有结果。你能帮我一下吗？下面是我的代码：
step1 = () => {
return (
<View style={{ flex: 8}}>
<Text h3 style={{ ...styles.title, marginVertical: 10.0 }}>{this.state.user=="User"?"Size":"
浏览 0提问于2021-04-07得票数 0
1回答
我想将这个Flatlist反应本机代码转换成一个类文件。
javascript、reactjs、react-redux、react-native
import React from 'react';
import {
SafeAreaView,
TouchableOpacity,
FlatList,
StyleSheet,
Text,
} from 'react-native';
const DATA = [
{
id: '1',
title: 'First Item',
},
{
id: '2',
title: 'Second Item',
},
{
id:
浏览 4提问于2019-10-04得票数 1
回答已采纳
1回答
api本机-在呈现api数据时，“未定义的对象不是对象”
javascript、react-native、rest
我正在制作一个应用程序，它从API中获取数据并显示在屏幕上。当屏幕呈现时，它会产生以下错误:未定义的呈现错误不是一个对象(计算'this.text')。有趣的是，除了节点模块中的文件之外，“this.text”在我的任何屏幕上都不一样。不管怎样，这是文件
呈现数据的屏幕：
/* the screen that renders the data */
import React, {useEffect, useState} from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text,
浏览 2提问于2022-01-01得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
