在FlatList react native中使用时，可选文本不起作用
在FlatList组件中使用可选文本时不起作用的问题可能是由于以下几个原因导致的：
- 数据源问题：首先要确保数据源中包含了可选文本的相关数据，并且数据格式正确。可以通过打印数据源来检查是否包含了可选文本的字段。
- 渲染问题：在FlatList的renderItem函数中，需要正确地渲染可选文本。可以通过在renderItem函数中打印相关数据来检查是否正确地渲染了可选文本。
- 样式问题：可选文本可能被其他样式属性覆盖或者未正确设置。可以检查是否有其他样式属性影响了可选文本的显示，可以尝试调整样式属性来解决问题。
- 组件属性问题：FlatList组件提供了一些属性用于自定义渲染和交互行为。可以检查是否正确地设置了相关属性，例如itemStyle、contentContainerStyle等。
如果以上方法都无法解决问题，可以尝试搜索相关文档或者在社区中提问，以获取更多帮助和解决方案。
关于FlatList和React Native的更多信息，你可以参考腾讯云的React Native开发文档：React Native开发文档。
相关·内容
import React,{Component} from 'react';
import { Flatlist, Text, View} from 'react-native';
export default class List extends Component {
state={
person:[{name:'abhjeet'},{name:'shubham'},{name:'kamal'},{name:'devesh'},{name:'ashu'
浏览 11提问于2020-07-09得票数 0
回答已采纳
3回答
我是新的反应本机，目前与无限滚动列表视图挣扎。这是一个日历列表，需要根据选定的公司(作为支柱)进行更改。问题是:螺旋桨(以及myCompany状态也会改变)，但是在_loadMoreAsync方法中，prop.company和myCompany都保存它们的初始值。
import * as React from 'react';
import { FlatList } from 'react-native';
import * as Api from '../api/api';
import InfiniteScrollView from '
浏览 10提问于2021-05-15得票数 1
回答已采纳
我正在尝试从我的api restful中获取值，并将其加载到我的扁平列表中。但它不起作用。 import React from 'react';
import {
Platform,
ScrollView,
StyleSheet,
Text,
View,
FlatList,
Row
} from 'react-native';
export default function HomeScreen() {
const highScores = fetch('https://facebook.github.io/reac
浏览 24提问于2019-12-25得票数 0
回答已采纳
我正在尝试将输入字段和选择器中的文本动态添加到React Native中的FlatList中。我遇到的问题是，我一按下按钮，FlatList就不会立即更新。 只有在触发文本输入的onChangeText或选择器元素的onValueChange之后，项目才会最终添加到列表中。 import React, { Component } from 'react';
import { View, Text, Picker } from 'react-native';
import { TextInput } from 'react-native-paper
浏览 35提问于2020-07-16得票数 1
回答已采纳
我正在开始使用React Native，并遵循了React Native教程中的基础知识，能够按照我的意愿创建和修改Flatlist。我现在正在尝试创建一个简单的待办事项应用程序，它将调用不同的类到主屏幕。我的问题是，虽然我可以从不同的类调用简单的文本，但我无法显示列表中的内容。
以下是Homescreen.js中的代码：
<code>A0</code>
下面是MainComponent.js中的代码：
<code>A1</code>
当调用"MainComponent/“时，它会显示”运行应用程序时显示此文本“-text，但text列表
浏览 8提问于2019-08-20得票数 0
我仍然不能理解React Native中的ref(和一般的React )。我使用的是函数组件。我有一个包含许多项的FlatList。如何为文本或视图组件等项中的对象创建引用？ <FlatList
data={data}
renderItem={({ item }} => {
<View>
... lots of other stuff here
<TouchableOpacity onPress={() => _editITem(item.id)}>
<Text ref={(a) => '
浏览 15提问于2019-09-25得票数 0
回答已采纳
1回答
最近我开始在React-Native上工作，之前我曾经在React上工作过，因为我是新手，我正在努力处理许多需求，例如在两个列表之间拖放实际上在使用HTML/React时非常简单，但在React-Native中它是如此复杂，没有库来支持这个功能，我从来没有遇到过这样的困难，有没有一种方法可以在React-Native中使用任何React库，或者是否有人可以帮助我使用React-Native库，在那里我可以使用可拖动的Flatlist在彼此之间拖动，以及可以选择将其移动到另一个列表。
在过去的几周里，我一直在为这个需求而苦苦挣扎，我已经用谷歌搜索了很多。
也尝试了一些React-Native库，
浏览 15提问于2019-11-24得票数 0
回答已采纳
1回答
我正在为一个呈现FlatList的组件编写一些单元测试，我需要模拟一些动作，比如scrollTo和scrollToEnd。
谁知道我怎么才能做到这一点？
我正在使用Jest和Enzyme进行测试。
import React form "react";
import { FlatList } from 'react-native';
import { mount } from 'enzyme';
describe("<FlatList/>", () => {
const callback = jest.fn(
浏览 12提问于2019-08-12得票数 0
我对本机和redux的反应相当陌生，我试图使用redux从一个平面列表中的JSON文件中呈现库标题，但是我的FlatList组件不会在屏幕上呈现任何内容。这是我的密码：
LibraryList.js
import React, { Component } from "react";
import { FlatList } from "react-native";
import { connect } from "react-redux";
import ListItem from "./ListItem";
class Libr
浏览 7提问于2020-03-11得票数 2
当我在屏幕上呈现许多单元格时，FlatList出现了问题。
请先看下面的图片。
假设我们有：
具有行x列=80x80= 6400单元格的地图
启用和禁用滚动功能的按钮。
这些问题：
地图呈现的超级慢，初始视图，应用程序必须调用renderItem大约2000次，才能让用户继续他们的行动。
我正在尝试改变windowSize和initialNumToRender，但这没有帮助
当用户按下Enable/Disable Scroll时，应用程序不得不再次调用renderItem大约2000次，即使我将extraData设置为仅为cellList。
问题是
浏览 0提问于2021-06-28得票数 0
你好，我想通过使用showModal()访问AddModalBox.js到App.js，在AddModalBox.js中从App.js调用AddModalBox.js()，但是不起作用，它说: showmodal.showMdal()不是一个函数.谢谢你的帮助..。App.Js
import React ,{useRef,useState} from 'react'
import {View,Text,StyleSheet,Image,Button,FlatList, Alert } from 'react-native'
import
浏览 0提问于2019-11-01得票数 0
回答已采纳
我刚刚把我的应用程序从React Native 0.58.5升级到0.61.2，现在我不能在安卓系统的FlatList中选择文本。
我尝试在React Native 58.5的Text组件中设置selectable = {true}，它工作得很好，可以复制文本中的内容。但是在将React Native版本从0.58.5升级到0.61.2之后，无法选择用于在Android 9.0中复制/粘贴内容的文本。实际上，它可以在Android 5.0上工作，但不能在Android 9.0上工作
export default class App extends React.Component {
_re
浏览 2提问于2019-10-27得票数 4
2回答
我通过API从axios中获取数据，但是当我呈现它的数据时，它会显示空白模板。如果我做错了，请告诉我。我用api响应粘贴我的代码。谢谢
console.log => response.data
Data Array [
Object {
"ID": 2466,
"ItemName": "WWE2K20"
}
]
我的组件
import React, { Component } from 'react';
import { Container, Header, Content, Card, CardItem
浏览 0提问于2019-11-07得票数 1
回答已采纳
1回答
我已经创建了3个文件在Firestore数据库，每个文档有不同的数据。
但是，当我在不同的文档ids上添加不同的数据时，就会得到空白，而这些空格将自动为我之前创建的其他文档ids生成。
文档1应该显示在第一个屏幕上，文档2应该显示在第二个屏幕上。我的意思是每个文档的数据都应该显示在自己的屏幕上。请查看下面的图像链接-
First Screen
import React, { useState, useEffect } from 'react';
import {View, Button, Text, FlatList, StyleSheet
浏览 5提问于2022-08-26得票数 0
回答已采纳
我对react native中的FlatList组件有一点小问题。FlatList中的项目具有不同的高度。下面是我所拥有的一个小示例：
第一个问题是所有项目都位于顶部。我想把所有的东西都放在底部。
第二个问题是FlatList的高度总是最大项的高度。所以你也可以滚动到一个小项目的白色区域中的另一个项目...
下面是我的代码：
import React from "react";
import {
Text,
View,
Dimensions,
StyleSheet,
ListView,
TouchableOpacity,
浏览 1提问于2017-12-03得票数 0
我试图在FlatList中呈现API调用中的文本，但是作为输出，我什么也没有得到。没有错误。
以下是我到目前为止尝试过的：
API调用后FlatList中的文本呈现
import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View, Image,
FlatList,Dimensions,
} from 'react-native';
const { width, height } = Dimensions.get('window');
浏览 0提问于2018-12-04得票数 1
回答已采纳
我想使用getParam (在屏幕之间传输数据)从数组中创建一个列表。最终结果应该如下所示：
WiosłaDeskaPodciąganie
现在我正在使用文本，可能它可以由FlatList工作(但没有显示)
代码：
import React, {useState} from "react";
import { Button, StyleSheet, Text, View, Pressable, FlatList, TouchableOpacity } from 'react-native';
import { globalStyles } from ".
浏览 2提问于2022-01-21得票数 0
1回答
我只想获取数据，我在我的应用程序调用的数据，它运行得很好，但为什么我要得到所有不必要的部分，如何删除，谢谢您的支持。请检查数据库图像，并显示输出图像如何显示。我不希望那些标记为红线的部分，因为我没有在代码中调用它们。是FlatList问题还是Firebase问题？
import React, { useState, useEffect } from 'react';
import { ActivityIndicator, FlatList, View, Text } from 'react-native';
import {firebase} from
浏览 1提问于2022-08-27得票数 1
回答已采纳
如何在React Native中为FlatList的renderItem处理程序定义类型？ 这就是我目前处理它的方式： // Importing the generic type of the FlatList render item handler
import { ListRenderItem } from "react-native";
// Associating the type to the handler
const renderItem: ListRenderItem<Bill> = useCallback(({ item }) => (
浏览 3提问于2020-07-26得票数 0
1回答
我试图使用highScores的键和值来创建一个highScores，将它们放在我的ScrollView中，但是没有呈现.怎么啦？
import React from 'react';
import {
Platform,
ScrollView,
StyleSheet,
Text,
View,
FlatList,
Row
} from 'react-native';
export default function HomeScreen() {
const highScores = { '1': 'a&#
浏览 1提问于2019-12-24得票数 0
回答已采纳
我尝试使用react native中的Flatlist组件显示多个图像，但由于某些原因我得到了一个TransformError，我还希望显示的每个图像都有我设置的不同背景颜色。下面是我使用的代码
import React, { useState } from "react";
import { StyleSheet, Text, View, Image, FlatList } from "react-native";
export default function App() {
const [category, setCategory] = useSta
浏览 2提问于2020-05-14得票数 0
我试图让一些特定的数据出现在一些标签中，但它没有显示。但是，当我在console.log文本标记中尝试获取相同的数据时，我可以看到它。
以下是我的代码
import React, { Component } from 'react';
import {
View,
FlatList,
Text
} from 'react-native'
import { NavigationActions } from 'react-navigation';
import { Header }
浏览 3提问于2018-02-22得票数 0
回答已采纳
2回答
过滤简单Flatlist
、、、
我想通过一个搜索栏过滤这个简单的单张表。我如何对它进行编码，以便无论我在输入文本上写什么东西，它都会过滤平面列表？你能帮我完成吗？
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, TouchableOpacity, LayoutAnimation, Image, FlatList, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons
浏览 0提问于2020-05-19得票数 3
回答已采纳
2回答
在renderItem属性中，item周围的大括号有什么作用？我试着像这样传递它
renderItem={ item => <Text style={styles.item}>{item}</Text>}
但它似乎不起作用。请指导我这方面的工作。
//Code snippet from React Native docs as below.
//url: https://facebook.github.io/react-native/docs/using-a-listview
import React, { Component } from 'react
浏览 0提问于2019-11-08得票数 2
当我试图在博览快讯中运行以下代码时，我得到了错误‘无法解析模块
下面是我的HomeScreen.js代码
import { StyleSheet, Text, View, FlatList } from "react-native";
import axios from "axios";
import { useState, useEffect } from "react";
export default function HomeScreen() {
const [cycles, setCy
浏览 11提问于2022-12-03得票数 0
我在我的Expo项目中安装了react-native-vector-icons。但它不起作用。
import Icon from 'react-native-vector-icons/SimpleLineIcons';
它显示此错误
这是package.json
{
"main": "node_modules/expo/AppEntry.js",
"private": true,
"dependencies": {
"antd-mobile": "^2.1.8
浏览 1提问于2018-07-18得票数 0
在以下方面有何不同：
import { FlatList } from "react-native";
和
import { FlatList } from "react-native-gesture-handler";
浏览 23提问于2022-01-18得票数 6
1回答
我想我应该避免重蹈覆辙。那么，为什么这个代码不起作用呢？
RenderItem不是一个函数。
import React, { memo, useMemo } from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, TouchableOpacity, Image, Dimensions } from 'react-native';
const Shopping_cart = ({ datas, onPressSetting }) => {
const RenderItem
浏览 6提问于2021-08-16得票数 0
回答已采纳
1回答
我正在尝试在react native中建立一个联系人列表。我没有做下面提到的地方提到的所有可能的优化。 React native flat list optimization 8 ways to optimize React native FlatList performance how-to-optimize-your-react-native-flatlist How did I optimize my React Native FlatList? flatlist-performance-tips react-native-optimized-flatlist 这些我都一一试过了。by
浏览 20提问于2021-01-23得票数 0
我正在开发一个应用程序，它应该可以显示JSON文件中的一些项目。我能够让它与来自单独JSON文件的名称列表一起工作，但我正在使用的不同JSON文件不起作用。下面是我的JSON阅读器文件中的代码：
import React, { Component } from "react";
import { View, Text, StyleSheet, FlatList } from "react-native";
import { Icon } from "native-base";
class LikesTab extends Component {
浏览 0提问于2018-07-09得票数 0
我在FlatList里面有一个KeyboardAvoidingView。当显示键盘时，我想滚动到FlatList的末尾。
我正在侦听“keyboardDidShow”事件，它确实会被触发，但是它可能会被过早地触发，因为在调用scrollToEnd之后，FlatList不会滚动到结束。
我已经了解了onLayout事件的KeyboardAvoidingView，但是，只要设置onLayout事件来触发一个函数，就会阻止KeyboardAvoidingView在显示键盘时调整其大小。
<KeyboardAvoidingView behavior='padding' style
浏览 3提问于2017-05-17得票数 42
回答已采纳
1回答
扁平列表的实现
、、
我使用扁平列表只是为了添加简单的文本。我是react原生的新手。每当我运行这个应用程序时，我都会得到相同的屏幕。我看到的屏幕和app.js中默认的一样。我做了一个组件类BasicFlatList。我的代码是
import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';
import flatListData from '../data/flatListData';
cl
浏览 0提问于2018-10-31得票数 0
我正在为我的站点创建React应用程序，因为我不知道如何从滚动中修复标头，所以我找到了另一种方法，即React 5。然而，在<Stack.Screen name="Home" component={Home} />中，除了iPhone，它只显示"Home“的文本，上面的文本是来自Stack.Screen的名称param，它应该显示我从调用的API中获得的列表，因为我已经在反应导航之前测试了FlatList显示：
以下是代码：
import React, { Component, useState, useEffect } from 'react&#
浏览 4提问于2021-06-19得票数 0
回答已采纳
1回答
我是react-redux的新手，目前正在尝试构建一些堆栈应用程序，它将只是某种类型的菜单，它的部分将带有标题，当按下标题时，它将显示一些关于它的简单文本。所以我使用Flatlist来渲染所有这些部分，渲染效果非常好。它恰好呈现了9个部分，这是我当前对象的数量，这意味着它可以访问数据，另外，当我尝试更改这些部分必须显示的标题的字体大小时，这些部分的大小也会发生变化，这意味着它肯定也可以访问标题字符串，但由于某些原因，文本根本不会显示。下面是它的外观： ? 我试着更改文本颜色，更改大小，更改背景颜色，添加一些填充，但部分仍然不显示文本。 下面是我实现FlatList的地方： impor
浏览 8提问于2019-08-21得票数 0
回答已采纳
我已经使用react-native-svg创建了一个矩形，并在该矩形中添加了一个flatList，它显示了所有的项目，但我无法滚动列表。请检查一下我是不是漏掉了什么？
<Svg style={styles.container}>
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0.6">
<Stop offset="0" stopColor=&
浏览 1提问于2020-08-02得票数 0
我正在尝试通过连接到内部JSON文件来呈现平面列表。平面列表似乎正在渲染，但没有显示任何文本。代码中的卡片列表被渲染了9次，JSON文件中有9个对象。但没有显示任何文本。 // libraryList.js
import React, { Component } from 'react';
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './List
浏览 26提问于2019-05-02得票数 1
回答已采纳
我在同一问题上发现了很多问题，但似乎没有一个问题能解决问题。目前，我正在使用redux来获取一个对象数组，操作该数据以匹配SectionList数据reqs，并将其提供给SectionList部分支柱。在RenderItem中，我使用FlatList并输入项目支持sections.data。最后，renderItem in FLatList是一个PureComponent。我尝试过使用shouldComponentUpdate，以及其他人推荐的许多其他支持，但似乎都没有用。SectionList一致地呈现项3次或更多次。这是我的密码：
// SECTION LIST COMPONENT
im
浏览 0提问于2019-06-11得票数 0
import React, { Component } from 'react';
import { View, Text, FlatList, TouchableOpacity, Dimensions, StyleSheet } from 'react-native';
const data = [
{id: 'Music', value: 'Music'},
{id: 'Events', value: 'Events'},
{id: 'About Us'
浏览 23提问于2019-10-01得票数 0
回答已采纳
import React from 'react';
import {SafeAreaView, KeyboardAvoidingView, FlatList, View, Text, TextInput, Button, StyleSheet } from 'react-native';
export default class Guest extends React.Component {
state={
command: '',
}
constructor(props) {
sup
浏览 4提问于2018-09-12得票数 6
回答已采纳
我正在学习如何使用react-native(Android)实现Firestore。然后，我找到了'react-native-firebase‘并陷入了这个异常。
Error:Exception in
HostObject::get(propName:RNFirebase):
java.lang.NoClassDefFoundError: Failed resolution
of: Lcom/google/firebase/FirebaseApp;
我已经在我的gradle中设置了firebase (参考)
Firebase数据库的规则
rules_version = '2&
浏览 2提问于2019-11-11得票数 5
描述
你好，我对FlatList的反应非常新，我试图在ScrollView中呈现一个FlatList，我在ScrollView中提到这个FlatList应用程序是不恰当的，这可能会导致一些滚动方向的混乱。因此，我搜索了这个问题的解决方案，并发现FlatList有一个FlatList属性来呈现ScrollView中的其他所有内容。我完成了在我的屏幕上实现这个解决方案，但现在它不尊重SafeAreaView的边界，这是非常烦人的，我不想在外部的ScrollView/View组件中添加硬编码的边距/填充。那就不好看了。
目前执行情况
screens/Home.js:
import React fro
浏览 5提问于2022-02-17得票数 2
回答已采纳
我从Api获取数据并将其显示在FlatList中，但我只想向用户显示有限的字符串，而不是我从Api获得的整个文本。
下面是我从服务器上得到的示例文本。
"Text": "Apu Nahasapeemapetilon - Apu Nahasapeemapetilon is a recurring character in the American animated television series The Simpsons."
在这里，我只想在-之后显示数据直到-，我不希望在Flatlist.Is中显示这么长的数据，有任何方法可以在- sign之前获取文本。
浏览 6提问于2021-06-01得票数 0
回答已采纳
我想使用react-native-paper在我的React Native应用程序中有一个垂直的卡片列表。我将使用作为react-native-paper一部分的<Card>组件。
我应该将卡片包装在<FlatList>中还是作为react-native-paper一部分的<List>组件中？我不确定react-native-paper中的<List>组件到底对应于什么，也不确定在Android和iOS中使用它来获得更好的结果是否有益。
浏览 0提问于2020-09-20得票数 1
我正在尝试使用react-native-dynamic-searchbar和Redux钩子在React Native中搜索FlatList。有很多关于如何做到这一点的信息，但没有使用分派钩子。 我的非工作代码如下： const Contacts = () => {
const dispatch = useDispatch();
const contacts = useSelector(state => state.user.parsedContacts);
const renderContacts = contacts => {
return (
浏览 18提问于2020-04-09得票数 2
回答已采纳
我正在尝试创建动态复选框，名称从json获取，看起来和我需要的一样，但是如果没有代码解释，我无法归档我的目标，
我有一个这样的json例子：
this.state = {
data : [
{
"name": "ALL",
},
{
"name": "Android",
},
{
"name": "iOS",
},
{
"name": "React Native",
}
]}
下面的代码如下：
<
浏览 0提问于2018-03-20得票数 2
我正在用ReactNative和博览构建应用程序，我想用Flatlist显示数据，我从外部文件导入数据。除了没有显示在屏幕上的数据和屏幕上的空数据之外，没有出现错误。
import { GestureHandlerRefContext } from '@react-navigation/stack';
import Rect,{ useState } from 'react';
import {View, Text,FlatList, StyleSheet,SafeAreaView} from 'react-native';
import Da
浏览 10提问于2022-04-04得票数 0
伙计们，日安。我正在尝试在"AppIntroSlider“中实现”react-native-app-intro slider“的水平滑动。
import AppIntroSlider from 'react-native-app-intro-slider';
我浏览了这个包的npm，我看到它使用水平滚动FlatList来水平滚动多个页面。在每个页面中，我都显示了简短的介绍文本和python的代码片段，这些代码片段在水平方向上不适合屏幕。问题是我不能在这个FlatList项目/页面中水平滚动这个代码片段。
下面是一段代码：
<ScrollView nestedScr
浏览 2提问于2020-02-03得票数 0
我有一个有两个项目的FlatList。我需要在这个列表上追加另一个元素。当用户单击按钮时，来自文本输入的数据应该出现在FlatList的末尾。因此，我尝试将数据对象推送到列表数组的末尾，但新的项替换了最后一个项。
import React, { useState } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
export
浏览 0提问于2020-04-06得票数 4
回答已采纳
这是一个常见的问题，但不知怎的，我已经尝试了我能找到的所有解决方案，但仍然收到了这个警告。
VirtualizedList: You have a large list that is slow to update - make sure your renderItem
function renders components that follow React performance best practices like
PureComponent, shouldComponentUpdate, etc. {"contentLength": 5200, "dt&#
浏览 20提问于2022-09-23得票数 0
我正在使用react native创建一个预订应用程序，其中我必须显示多个列表。谁能告诉我哪一个最好用，原生FlatList还是Flipkart回收器列表视图？ React原生FlatList:：https://facebook.github.io/react-native/docs/flatlist Flipkart回收器列表视图:：https://github.com/Flipkart/recyclerlistview
浏览 20提问于2019-12-27得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
