标签: react-native-tab-view

我正在使用 react-native-tab-view 模块在我的应用程序中实现选项卡。选项卡工作正常，但我希望当用户向下滚动列表时，应使用动画隐藏选项卡栏。

我正在使用的模块链接，即 https://github.com/react-native-community/react-native-tab-view

这是我的代码：-

import React, { Component } from 'react';
import { View, Text, ScrollView, ActivityIndicator } from 'react-native';
import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';

import styles from './Styles';

// First tab component
const FirstRoute = () => (
  <ScrollView>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
  </ScrollView>
);

export default class BookingDetail extends Component {

  // default states
  state = {
    index: 0,
    routes: [
      { key: …

我正在使用 react-native-tab-view，我可以在选项卡上放置文本，但我想要图标。GitHub 上有一些答案，但不清楚。如果你知道什么就完美了！

问题

我正在尝试使用 patch-package 来修补react-native package react-native-tab-view，但是当我编辑react-native-tab-view的node_module中包含的TSX文件并应用我的补丁时，更改不会反映在我的应用程序中。

node_modules/react-native-tab-view 的结构

下面是包结构的屏幕截图。 封装结构

他们还用于@react-native-community/bob在发布之前构建包，以便生成一个 lib 文件夹，其中包含模块文件夹和包含 JS 文件的 commonjs 文件夹。

我目前的统计数据

我的补丁正在创建，但是 /lib/module 中的文件不会更改，并且在模拟器上运行时这些更改也不会反映在我的应用程序中

我尝试在编辑 /src 中的 TSX 文件（而不是模块 /lib/module 中的 JS 文件）后使用 patch-package 应用补丁，因为它实现起来更简单。

环境 react-native 0.63.0补丁包6.2.0react-native-tab-view 2.15.1react-native-gesture-handler 1.5.6react-native-reanimated 1.7.0

问题 我是否缺少构建或编译步骤来让react-native-tab-view从我为其创建补丁的TSX文件生成新的JS文件？

任何帮助将不胜感激！

我正在使用https://github.com/react-native-community/react-native-tab-view 但我的问题是

1. 当选项卡较多时，只会在屏幕上显示 且高度会扩大。我正在寻找的是高度是固定的，宽度根据选项卡扩展
2. 在选项卡之间移动时，似乎会重新加载每个选项卡上的视图

我感谢您为解决我的问题提供的所有建议。谢谢

我正在使用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: 'tab3', title: 'Tab3' },
      { key: 'tab4', title: 'Tab4' },
      { key: 'tab5', title: 'Tab5' },
    ],
  };
render(){
   return(
   <TabView
          navigationState={this.state}
          renderScene={this.renderScene}
          renderTabBar={this._renderTabBar}
          onIndexChange={this.onIndexChange}
          initialLayout={{
            width: Dimensions.get('window').width,
            height: 100,
          }}
        />

)}
}

我也发布图片以供参考。

是否有任何属性可以帮助我TabView使用单个选项卡固定宽度向右滚动？

PS：我尝试过，react-native-scrollable-tab-view但卡在同一个地方。

我有 2 个用于导航的库。React 导航 v5 和 React-native-tab-view。反应导航中的 3 个选项卡：主页/发现/个人资料。Discover 是一个具有反应本机选项卡视图的屏幕。我的主页中有几个按钮，按下它们后，它们应该导航到“发现”选项卡和选项卡视图中的特定选项卡。现在，我使用反应导航进行了从“主页”到“发现”的导航。但是，导航到“发现”后如何跳转到特定选项卡？

这是主页中的一个元素，其中包含将我从主页导航到发现的按钮：

render() {
    const { error, pending, refresh, videos } = this.props;

    return (
      <HomeViewItem
        headerText={'Top Videos'}
        footerText={'More Videos'}
        navigate={() =>
          this.props.navigation.navigate('TabNavigator', {
            screen: 'Discover',
          })  // this will navigate me to Discover
        }
        view={this._renderVideos(videos, pending, error, refresh)}
      />
    );
  }

这是“发现”屏幕中的选项卡视图：

export default class DiscoverTabView extends React.Component<DiscoverProps> {
  _StreamsRoute = () => <StreamsTabScreen navigation={this.props.navigation} />;
  _NewsRoute = () => <NewsTabScreen navigation={this.props.navigation} />;
  _VideosRoute = () => <VideosTabScreen navigation={this.props.navigation} />; …

我对 React Native 完全陌生，正在为我们的一个客户构建一个应用程序。

我创建了一个屏幕，显示名称列表，这些名称可以按字母顺序显示或按类别分组。我使用该react-native-tab-view组件来完成这项工作。这两个选项卡中的每一个都呈现其各自的屏幕组件，ScreenMapAlpha（显示 FlatList）和ScreenMapCategory（显示 SectionList）。

对于renderItem这些列表的每个道具，我想使用 TouchableOpacity 使每个项目都可点击，就像详细信息页面一样，但是当我不断收到此消息时，我无法让 navigation.navigate() 函数正常工作：

类型错误：未定义不是对象（正在评估“_this3.props.navigation.navigate”）

我一直在阅读react-native-tab-view Github 文档，但我找不到将导航对象传递到两个 Alpha/Category 屏幕组件以使其工作的方法。

我的代码如下所示：

import * as React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import ScreenMapAlpha from '../screens/map_alpha';
import ScreenMapCategory from '../screens/map_cat';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

const initialLayout = { width: Dimensions.get('window').width };

const renderTabBar = props => (
  <TabBar
    {...props}
    indicatorStyle={{ backgroundColor: '#fff' }}
    style={{ …