如何在react-native-tab-view中使用renderScene向FlatList传递道具？
在react-native-tab-view中使用renderScene向FlatList传递道具的方法如下：
- 首先，确保已经安装了react-native-tab-view和react-native-gesture-handler库。可以使用以下命令进行安装：
npm install react-native-tab-view react-native-gesture-handler- 在你的代码中引入所需的组件和库：
import React from 'react';
import { View, FlatList } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';- 创建一个包含多个场景的对象，每个场景都包含一个FlatList组件。在每个场景中，你可以通过renderItem属性来自定义渲染每个列表项的方式。
const FirstRoute = () => (
<FlatList
data={data}
renderItem={({ item }) => (
<View>
{/* 自定义列表项的渲染方式 */}
</View>
)}
/>
);
const SecondRoute = () => (
<FlatList
data={data}
renderItem={({ item }) => (
<View>
{/* 自定义列表项的渲染方式 */}
</View>
)}
/>
);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});- 创建一个TabView组件，并将renderScene作为其children属性传递给它。你还可以自定义其他属性，例如initialLayout、renderTabBar等。
const App = () => (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);通过以上步骤，你可以在react-native-tab-view中使用renderScene向FlatList传递道具。在每个场景中，你可以自定义FlatList的渲染方式，并根据需要传递道具。请注意，上述代码中的data和其他变量需要根据你的实际情况进行替换。
关于react-native-tab-view的更多信息和使用方法，你可以参考腾讯云的相关产品文档：react-native-tab-view产品介绍。
相关·内容
这是我的结构。里面是一个带有3个屏幕的选项卡视图。每个屏幕都有一个FlatList，问题出在这里，FlatList的onEndReached无法触发... <ScrollView
showsVerticalScrollIndicator={false}
stickyHeaderIndices={[1]}
endFillColor='#fff'
>
<AddrTop address={address} />
<HomeInput />
<Carousel />
&l
浏览 13提问于2020-03-23得票数 0
我是React Native中的新手，正在尝试将道具传递给FlatList中的ListHeaderComponent
代码如下：
const FirstRoute = (props) => {
const _renderHeader = () => {
return(
<View>
{props.isFollowed &&
<TouchableOpacity onPress={props.onSubmit}>
<Text>You have followe
浏览 31提问于2020-05-06得票数 0
react: "16.11.0",
react-native: "0.62.2",
react-native-navigation: "^6.4.0",
react-native-tab-view: "^2.14.0",
我正在尝试将与 V3一起使用。
到目前为止，我可以这样使用已注册的组件：
import EventsScreen from './EventsScreen';
function registerScreens()
{
...
Navigation.registerComponen
浏览 16提问于2020-05-05得票数 1
1回答
环境：
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.5.2",
"react-native-reanimated": "^1.4.0",
"react-native-tab-view": "^2.11.0"
问题：
如何在切换到另一个选项卡时停止滚动滑动？
示例：
当我滚动内容并从屏幕上移除手指时，内容继续滚动，即幻灯片
浏览 3提问于2019-12-06得票数 3
我是全新的反应原住民，我正在为我们的客户之一建立一个应用程序。
我创建了一个显示名称列表的屏幕，该列表可以按字母顺序显示，也可以按类别分组显示。我使用了react-native-tab-view组件来完成这项工作。这两个选项卡分别呈现各自的屏幕组件ScreenMapAlpha (显示FlatList)和ScreenMapCategory (显示SectionList)。
对于这些列表的每个renderItem支柱，我想让每个项目都可以使用TouchableOpacity点击成一个详细信息页面，但是我无法让navigation.navigate()函数工作，因为我一直收到以下消息：
TypeE
浏览 3提问于2020-07-30得票数 1
回答已采纳
我正在使用react-native-community/react-native-tab-view来呈现两个平面列表，这两个平面列表基本上是带有勾选框的检查表。
平面列表的代码从以下位置返回：
const ListRoute = () => {
return (
<FlatList
data={data}
renderItem={({item, index}) => {
return (
<View>
<Item
...checkbox code
/>
浏览 2提问于2020-05-30得票数 3
3回答
我在我的应用中使用了"react-native-tab-view“包。切换tab的swipe事件工作得很好，但当我按下tab时，它不工作，我不知道为什么……这是我的组件：
export default function TabsMenu() {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{key: 'env', title: 'Env.'},
{key: 'imp', title: 'Imp.
浏览 12提问于2019-12-30得票数 0
在我的代码中，我制作了树标签，在第一个标签上有两个输入字段和按钮。现在，在输入中输入值并单击按钮后，我必须将vale发送到其他选项卡。就像在名字栏中一样，我正在输入名字" Abhi“，点击按钮，这个Abhi应该反映在标签2上。与在动物字段中一样，这个动物应该反映在第三个标签上。请帮帮忙
import * as React from 'react';
import { View, StyleSheet, Dimensions,Text,TextInput,TouchableOpacity } from 'react-native';
im
浏览 7提问于2020-08-14得票数 1
2回答
如何在我的配置文件页面中滚动，其中选项卡是选项卡，选项卡内是平面列表？ 就像Instagram一样，如果你打开你的个人资料，就会有一个标签，你可以向下滚动，直到没有更多的图片可用。 我使用这个库：https://github.com/satya164/react-native-tab-view 我尝试了很多次，做了很多不同的事情，但都没有成功。我希望有谁能帮助我 我可以滚动，但他不会显示所有的结果。我不想在选项卡中滚动，我想滚动整个配置文件屏幕 ? <ScrollView style={styles.containerProfil}>
<
浏览 27提问于2021-04-25得票数 1
我无法解决此问题，并阅读了下面的文档https://www.npmjs.com/package/react-native-tab-view ? 此外，我也没有看到任何关于这个问题的文件。我使用了上面链接中提到的相同示例代码。 import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
cons
浏览 59提问于2020-07-31得票数 5
回答已采纳
3回答
我使用const来显示组件。现在，当我对const中的按钮使用react导航时，我看到这个错误:未定义的不是一个对象(计算'_this.props.navigation.navigate') 我尝试将navigation={this.props.navigation}添加到按钮以允许禁烟，但不起作用。 const WomenTab = () => (
<View>
<Button onPress={() => {
this.props.navigation.dispatch(St
浏览 16提问于2019-02-08得票数 2
回答已采纳
我遇到了一个问题，我的刷新指示器在我的构造函数中甚至没有显示状态为true。但它是在点击按钮时显示的。
下面是我的代码
class ProductList extends Component {
constructor(props){
super(props);
this.state = {
productList: null,
refreshing: true,
}
}
async componentWillMount() {
}
async _handleRefresh() {
console.log(&
浏览 1提问于2018-05-12得票数 2
2回答
我正在处理的屏幕需要一些选项卡导航。它工作得很好，但有一个问题。只有当我按下想要转到的标签时，它才会在滑动时呈现组件。它不会做任何事情。例:我在第3号标签上，我想转到标签1。如果我点击标签1，没有任何反应。在此过程中，我必须通过tab 2刷到它。我不想这样。这是我的代码。
<TabView
navigationState={this.state}
renderScene={this.renderScene}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Di
浏览 12提问于2019-07-29得票数 1
我正在尝试构建一个简单的原生react应用程序，只有3个场景：Home、Recent (最近的图片)和Photo (在Recent中选择的照片)
我正在使用Navigator：
<Navigator
ref="navigator"
configureScene={(route) => {
if (Platform.OS === 'android') {
return Navigator.SceneConfigs.FloatFromBottomAndroid;
}
}}
initialRoute={{}}
浏览 0提问于2016-10-22得票数 1
我是一个新来的反应原住民与博览，所以仍然挣扎与柔韧，即使阅读了许多文件。作为一个附加的图像，在图像中有一个空白，红色的矩形区域，标题和路由器风格之间的家庭组件。我试图移除那个区域，但到目前为止还不知道。你能给我提点建议吗？
组件: Home
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Button, FlatList, Dimensions } from 'react-native';
import LocationBar from &#
浏览 3提问于2020-04-19得票数 0
回答已采纳
我是新来的反应和反应。在App.React.js中，我将onRouteChange作为道具传递给Post.js。在Post.js中，在中，我从store和ownprops接收状态。我认为自己的道具将持有由父组件传递给组件的所有道具。但我没有收到onRouteChange in Post.js。请帮帮我。我错过了什么？
App.React.js
constructor(props) {
super(props);
this.onNavigatorRef = this.onNavigatorRef.bind(this);
this.onRouteChange = this.onR
浏览 0提问于2016-07-18得票数 0
1回答
我正在构建我的第一个反应-原生应用程序，并实现选项卡使用反应-本机表视图。被错误困住：
"TypeError:未定义不是一个对象(计算'_this.props.navigationState.routes.length')。
这是我收到的错误截图。
import * as React from 'react';
import {
Platform, StyleSheet, Text, View, Dimensions, StatusBar, FlatList, ImageBackground, TextInput
} from &#
浏览 0提问于2019-03-14得票数 1
我使用FlatList进行数据显示，也使用组件进行显示。
<FlatList
contentContainerStyle={{ paddingBottom: 50 }}
data={postList}
renderItem={renderItem}
keyExtractor={(item, index) => index.toString()}
refreshing={refreshing}
浏览 7提问于2021-12-23得票数 0
我正在创建一个应用程序，其中导航组件保存在索引中。启动时，您将自动转到登录页面。在此登录页面上，将为用户提供身份验证令牌。如何将此令牌返回到索引，以便在应用程序的其余部分中使用？谢谢!
index.android.js
//lots of imports
export default class CBURecCenterApp extends Component {
constructor(){
super()
this.renderScene = this.renderScene.bind(this)
}
renderScene(route, navigator){
浏览 0提问于2017-03-25得票数 1
我希望在调用onDidFocus()函数后，从导航器实例化的组件(场景)中调用一个方法。
我是这样实例化Navigator的：
<Navigator
initialRoute={{ name: 'Login' }}
renderScene={ this.renderScene }
configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight}
onDidFocus={(route) => route.component.onFocus()
浏览 2提问于2016-07-09得票数 2
回答已采纳
我是第一个反应的人--土生土长，学会了。在学习react-本地选项卡视图时，我试图改变它的颜色，但是经过几次尝试，我还是做不到。如果有人指导我如何改变选项卡的颜色，我将非常感激，它默认是蓝色的。，这是一段代码。任何帮助都将不胜感激。
import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
const
浏览 6提问于2020-10-26得票数 8
回答已采纳
2回答
我正在顶层TabView (来自)的一个页面中呈现一个水平FlatList (来自)
我遇到的主要问题是FlatList滚动的“优先级”比标签视图的高，所以如果我想要滑动顶部的TabView，我必须把手指放在FlatList之外(这不是真正专业的东西)。
下面是FlatList代码：
<FlatList
data={data}
renderItem={renderItem}
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
style={styles.container}
/>
和
浏览 78提问于2021-02-18得票数 1
1回答
我在屏幕顶部使用react-native-tab-view作为显示选项卡。如果屏幕数量增加(超过5)，屏幕视图看起来会很拥挤。
下面是我的代码片段
export default class CustomTabViewComponent extends React.Component{
state = {
index: 0,
routes: [
{ key: 'tab1', title: 'Tab1' },
{ key: 'tab2', title: 'Tab2' },
{ key
浏览 0提问于2019-05-30得票数 1
以下是我的代码
这是我的tab.js =>，我给出了三个选项卡(主要是在第一个home.js中工作)
import React, { PureComponent } from 'react';
import { Animated, StyleSheet,View } from 'react-native';
import { TabViewAnimated, TabBar } from 'react-native-tab-view';
import { StackNavigator } from 'react-navig
浏览 1提问于2017-09-14得票数 1
回答已采纳
我使用react-native-tab-view。那么如何将背景颜色仅设置为所选标签呢？
这就是我所拥有的。
<TabView
navigationState={this.state}
renderScene={SceneMap({
first: FirstRoute,
second: SecondRoute,
third: ThirdRoute,
fourth: FourthR
浏览 9提问于2018-07-10得票数 6
1回答
我正在扩展React.Component以呈现一个Navigator
<Navigator
renderScene={this.renderScene}
navigationBar={
<NavigationBar
routeMapper={NavigationBarRouteMapper}
style={styles.navBar} **// background colour is set here**
/>
/>
并沿导航器对象传递正在呈现的场景：
renderScene = (route, navigator) =&g
浏览 6提问于2016-06-13得票数 0
回答已采纳
我有这个菜单使用
import React from 'react'
import { View, Icon } from 'react-native'
import { connect } from 'react-redux'
import { togglePageMenu } from './menu.action'
import { OffCanvas3D } from 'react-native-off-canvas-menu'
import SearchPage from '../search-p
浏览 6提问于2017-05-13得票数 0
在这里，我创建了切换自定义复选框，这些复选框是在FlatList中以名称呈现的。
现在选中哪些复选框，我希望使用导航将这些名称发送到下一个屏幕。
那么，我如何实现该功能，如果有人知道，那么请帮助我同样的。
/**Code For custom checkbox:**/
import React from "react";
import {
TouchableOpacity,
Image,
View,
SafeAreaView,
Text,
} from "react-native";
import { useState } from
浏览 7提问于2022-07-26得票数 2
回答已采纳
2回答
结构
ScreenContainer.js
|
|---Header.js
| |---LogoButton.js
|
|----FeedContainer.js
|---Feed.js
我有一个FlatList在Feed.js
我想scrollToOffset() Feed，当LogoButton被点击。
ref of FlatList只存在于Feed.js中
如何从Feed.js调用LogoButton.js方法？
编辑:我尝试将ref存储在Redux中，但是它会导致多个事件分发和undefined错误
浏览 1提问于2018-01-18得票数 0
回答已采纳
这是我的场景。使用GetObjectField组件我正在填充TextInput，TextInput的onFocus使用导航器推送方法移动到另一个组件我使用GenericSummary component.When填充对象列表我选择要替换到GetObjectField TextInput的对象
var GetObjectField = React.createClass({
getInitialState:function(){
return {textValue:""};
浏览 0提问于2015-11-20得票数 0
我有一个组件InventoryScreen，它包含这样的Flatlist：
<FlatList
numColumns={2}
data={filteredData}
keyExtractor={(item, index) => index.toString()}
renderItem={renderItem}
stickyHeaderIndices={[0]}
keyboardDismissMode={"on-drag"}
浏览 11提问于2022-08-24得票数 0
回答已采纳
2回答
我正在使用React Native构建一个应用程序，并且我有一个卡片组件。这个卡片组件需要很少的钩子，问题是卡片组件是在HomeScreen组件中以FlatList呈现的。 所以层次结构是这样的： -Homescreen Component
---FlatList
----Card1
----Card2
----Card3 据我所知，在我的卡片组件中使用React Hooks是不可能的(无效钩子调用错误)。这意味着我不能使用像PanGestureHandler这样的东西，因为我需要使用钩子。我找不到任何东西，但我确信这是一个常见的问题，并且有一个解决方案。处理这个问题的最好方法是什么？ 这是
浏览 8提问于2021-08-08得票数 0
当我试图通过我的React Native应用程序中的TabViewAnimated切换到另一个选项卡时，我得到了以下错误。
我有两个子组件，Provider的用法如下：
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<TabViewAnimated
sty
浏览 2提问于2017-06-16得票数 1
回答已采纳
在我的呈现FlatList的AutoSuggest组件中，我想呈现不同类型的单元格。
我想将不同的组件传递到AutoSuggest中，例如：
<Suggest
customCell={<SimpleUserCell/>} //or any type of cell
/>
在Suggest.js中，我的渲染器将如下所示：
render(){
<FlatList
renderItem={(props) => {
return(
<this.props.customCel
浏览 11提问于2018-08-28得票数 1
回答已采纳
我正在制作一个FlatList渲染警报项。(反应-本机-简单-警报)
我的FlatList所在的tsx文件
const [alarms, setAlarms] = useState<AlarmType[]>([]);
...
const renderItem: ListRenderItem<AlarmType> = ({item}) => {
return <ListItem props={item} />; // i have an error here on props
};
...
<FlatList
浏览 4提问于2022-02-16得票数 0
回答已采纳
我想知道哪一种方式是为React onPress中的FlatList项分配FlatList函数的正确方法。我的导师为我解释说，也许我错过了OOP中“委托/关闭/块”定义的知识，我已经读过它，但到目前为止，我仍然无法自己弄清楚。以下是细节：
我有一个名为 menu 的屏幕--这个菜单有一个包含多个<MenuItem>的<FlatList>，每个<MenuItem>都有一个切换按钮以“添加项目到购物车”或“为购物车删除项目”(单击添加-再次单击以删除)。我将<MenuItem>分离到另一个文件，因此我的当前文件夹树如下所示：
__Menu
| |_
浏览 0提问于2019-07-29得票数 2
回答已采纳
下面是更新的代码--我正在尝试实现来自的function -本机抽屉--以及我正确传递给NavigationBarRouteMapper logs openDrawer()函数的变量，但是当单击左导航按钮时，它什么也不会做：
class practice extends Component {
...
openDrawer(){
this._drawer.open()
}
render() {
return (
<Drawer
content={<DrawerPanel/>}
openDrawerOffset={100}
浏览 5提问于2016-07-20得票数 1
回答已采纳
我有一个像这样的异步函数：
getDeals() {
if(this.props.user) {
this.setState({loading: true});
this.setState({deals: []});
var parameters = {
zip: this.props.user.zip,
sort: 'All',
category: this.props.selectedCategory,
company: this.props.user.company,
page: n
浏览 0提问于2018-01-24得票数 0
我的一个屏幕上有一个FlatList，但它还提供了一个必须保持在页面顶部的TextInput。TextInput确定呈现哪个其他组件，如果它是空的，它是一个类别页面，但是如果它被任何文本填充，则是搜索结果。我现在的问题是，我的TextInput在主FlatList之外，这使得它即使在滚动列表时也会位于屏幕的顶端。我希望它保持在页面的顶部，而不是跟随卷轴。
如果我将TextInput放入其中一个FlatLists中，则会导致另一个FlatLists由于呈现单独的组件而没有它。但是如果我把它放在两个FlatLists中，就会创建一个bug，在输入第一个字符之后，TextInput将退出编辑模式，因
浏览 10提问于2022-05-31得票数 1
当从GraphQL服务器添加数据时，我的FlatList不会更新。我尝试过提神和onRefresh，但我不太确定我将如何实现它，希望有人能帮助我。
<View>
<Query query={GET_ALL_RECIPES}>
{({loading, data, error}) => (
loading
? <ActivityIndicator />
: (
<FlatList
keyExtractor={(item) =
浏览 1提问于2018-07-06得票数 1
我正在创建一个从图像中识别文本的应用程序。我不知道如何从服务器保存json结果。
CameraScreen.js：
在CameraScreen中，用户拍摄图片，其中包含文本和图片发送到服务器。它还了一个儿子。
const postToServer = async (img) => {
const formData = new FormData();
formData.append('image', {
uri: img.uri,
type: 'image/jpeg',
浏览 8提问于2022-05-20得票数 0
在我的应用程序中，我使用TabViewAnimated创建了一个选项卡。我需要那些每个标签有不同的颜色。我尝试了很多方法，但都不起作用。这是我到目前为止得到的输出。
下面给出了我想要的。
这是我的代码。
import React, { PureComponent } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabViewAnimated, TabBar, SceneMap } from 'react-nati
浏览 1提问于2017-11-21得票数 3
1回答
因此，我有一个简单的按钮(TouchableHighlight)调用以下函数：
showMovie() {
this.props.navigator.push({
name: 'MovieScreen',
index: 1,
movie: "terminator"
});
}
它按预期工作，将定义在不同文件中的MovieScreen场景推送。
在MovieScreen构造函数中，我有：
constructor(props) {
浏览 1提问于2016-08-18得票数 0
回答已采纳
我正在使用mockapi.io来练习Axios调用
在发出POST请求(创建新数据)之后，我希望使用更新的数据呈现FlatList。我正在考虑提出一个新的GET请求，但我没有成功。
我需要帮助
这里是我调用GET请求的地方，GET请求已经有模拟数据，并使用FlatList查看它
ListScreen.js
class ListScreen extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
}
}
浏览 19提问于2022-06-09得票数 0
我正在用react native开发一个移动应用程序。我有一个组件"Period“，它有几个状态，每个状态都被存储为TextInputs。此组件在平面列表中呈现多次。现在我想知道如何才能获得在Flatlist中呈现的每个"Period“实例的状态值？
任何解释如何在React Native中工作。我以为每个组件实例都有它的on状态？
非常感谢
浏览 1提问于2021-07-13得票数 0
6回答
我正在尝试创建一个水平的FlatList，它周围有一些间距。对于列表中的paddingLeft，我能够得到正确的起始间距，但是列表中的paddingRight似乎没有在它之后留出任何空格(如果我一直滚动到末尾，最后一项就按在边框上)。
下面是一个小吃，这样您就可以实时运行并尝试一下：
这是我的密码：
import * as React from 'react';
import { Text, View, FlatList, StyleSheet } from 'react-native';
const data = [{ key: 1 }, { key: 2
浏览 0提问于2018-11-09得票数 23
回答已采纳
1回答
我知道如何设置一些文字粗体如下所示。
<Text>I am<Text style={{fontWeight:bold}}>a developer</Text></Text>
但我需要如何使用道具。
例如，
<FlatList
data={[{
title: 'I am<Text style={styles.bold}>a developer</Text>',
key: 'item1',
id
浏览 1提问于2018-01-24得票数 0
回答已采纳
在我的应用程序中，我有一个FlatList组件，它呈现下面的组件(有效地，一行包含小的信息片段)，我想要它，这样我就可以点击FlatList中的每个组件，然后将用户带到另一个提供更多详细信息的屏幕。
我已经设法使每个组件都是可点击的，并且我可以让它执行一个alert()来显示它是可点击的，但是使用React-Navigation对我来说添加起来有点棘手。
FlatList页面：
/* @flow*/
import _ from 'lodash'
import {getAllQuestions} from './questionRepository'
impor
浏览 0提问于2017-07-11得票数 0
根据文档，我必须在ScrollView或FlatList上的应用程序的每个屏幕上实现ScrollView。
有任何方法可以用RefreshControl组件包装我的所有应用程序吗？
浏览 6提问于2021-12-13得票数 1
我有一个FlatList，奇怪的是只有在滚动之后才能正确地呈现。另外，在刷新时，它会呈现为一秒，然后再次消失。FlatList本身只有3项。
FlatList在视图中的定义如下：
<View style={{flex: 1}}>
<FlatList
data={cartItems}
renderItem={({item}) => (
<CartItemCard
event={item.event_name}
ticketType={item.title}
浏览 0提问于2021-12-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
