标签: react-native-tab-view

我是 React-Native 的新手，正在学习它。在学习react-native-tab-view时，我尝试改变它的颜色，但经过几次尝试后我无法做到这一点。如果有人指导我如何更改默认为蓝色的选项卡栏的颜色，我将非常感激。这是 npm react-native-tab-view 的链接，这是一段代码。任何帮助将不胜感激。

import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
 
const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
 
const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
 
const initialLayout = { width: Dimensions.get('window').width };
 
export default function TabViewExample() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: …

我无法解决此问题，并浏览了以下文档 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';
 
const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
 
const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
 
const initialLayout = { width: Dimensions.get('window').width };
 
export default function TabViewExample() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { …

我react-native-tab-view用于处理表格导航。向下滚动时，是否可以让标签栏滚动，但一旦到达顶部就粘在屏幕顶部？所以像 ScrollView 的stickyHeaderIndices.

这是我想要的一个例子，标签栏“帖子、评论、关于”贴在顶部。

由于 flex: 1 样式，react-native-tab-view 不可见、未显示在屏幕上或无法工作，我们必须在父视图内提供 flex: 1 样式，否则它不会显示在屏幕上。

供参考： https: //github.com/satya164/react-native-tab-view/blob/main/example/src/CustomTabBarExample.tsx

解决方案 ：-

第一次前。使用默认标签栏 -

import { StyleSheet, Text, View, useWindowDimensions } from 'react-native'
import React from 'react'

import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

const BookingScreen = () => {

const layout = useWindowDimensions();

const FirstRoute = () => (
    <View style={{ flex: 1, backgroundColor: '#ff4081' }} /> // here also writing flex: 1 is mandatory
);

const SecondRoute = () => (
    <View style={{ flex: 1, backgroundColor: …

在我的本机项目中，我使用了DrawerNavigator，从中我导航到SwitchAccount页面。在SwitchAccount页面中，我使用了react-native-tabs中的Tabs。下面是我使用的代码

    render() {
      return (
     <View style={[styles.container]}>
      // Here _renderTab function return component based on selectedService
      {this._renderTab(this.state.selectedService)} 
      <TabBarContainer
          selectedService={this.state.selectedService}
          onTabChange={this._switchService}
        />
     </View>
    ); 
  }

当我单击选项卡时，它会更改状态，然后获得_renderTab函数返回的新组件。一切正常，但我想基于_renderTab函数返回的组件更改Header标题。我该怎么办？有什么办法可以从构造函数更改标题标题吗？以下是我在SwitchAccount页面中的navigationOptions的代码。在那里，我想从构造函数更改标题。

    static navigationOptions = {
    title:'Filter',
    drawerLabel: 'Switch Account',
    drawerIcon: ({ tintColor }) => (
      <Icon
        name='md-switch'
        size={40}
        color='black'
      />
    ),
  };

我使用 react-native-tab-view。那么如何仅将背景颜色设置为选定的选项卡？
这就是我所拥有的...

<TabView
                navigationState={this.state}
                renderScene={SceneMap({
                  first: FirstRoute,
                  second: SecondRoute,
                  third: ThirdRoute,
                  fourth: FourthRoute,
                })}
                onIndexChange={index => this.setState({ index })}
                initialLayout={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}
                useNativeDriver = {true}
                renderTabBar={(props) =>
                    <TabBar
                      {...props}
                      indicatorStyle={{ backgroundColor: 'white' }}
                      style={{backgroundColor: "black", height: 40}}
                      renderIcon={this.renderIcon}
                      indicatorStyle={{backgroundColor: "#555555"}}
                    />
                  }
                />

谢谢！

我对选项卡使用react-native-tab-view，但是当我单击选项卡时，转换非常慢。并且滑动时流畅且快速。我做了什么来解决它：-我将所有子组件设为 PureComponent，它在索引更改时呈现。这意味着如果内容与之前没有不同，它就不会重新渲染。我交叉检查了组件是否正在重新渲染以及组件是否未重新渲染。但如果单击选项卡（而不是滑动），它仍然会滞后或过渡缓慢

我一直在尝试显示动态标签，react-native-tab-view但它一直在给我这个错误：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `SceneComponent`.

This error is located at:
    in SceneComponent (at SceneMap.js:16)
    in RCTView (at View.js:43)
    in AndroidViewPager (at ViewPagerAndroid.android.js:247)
    in ViewPagerAndroid (at PagerAndroid.js:154)
    in PagerAndroid (at TabView.js:59)
    in RCTView …

我正在尝试在 React Native 中创建一个带有 2 个选项卡（使用react-native-tab-view）的屏幕，布局如下：

 ------------------------
|   Collapsible Header   |
|------------------------|  
|    Tab A  |  Tab B     |
|------------------------| 
|                        |
|                        |
|        FlatList        |
|         in Tab         |
|         Content        |
|                        |
|                        |
|                        |
|                        |
 ------------------------

我选择的布局是可折叠标题和选项卡栏的绝对定位，并且 FlatList 实际上覆盖了整个屏幕（标题和选项卡栏都位于其顶部）。为了将可滚动部分放在选项卡栏之后，我paddingTop在contentContainerStyleFlatList 的 中添加了 。这是问题的根源 - 当在选项卡 A 中滚动，然后移动到选项卡 B 时，由于填充，将会出现空白。

我创建了一个完整的 Expo 项目来展示这个问题：https://expo.io/@bartzy/collapsible-tab-view-example 这是 Expo 项目的 Github 存储库：https://github.com/bartzy/CollapsibleTabViewExample

这是示例应用程序的快速视频，显示切换到选项卡 2 后的空白填充空间：

我很感激有关如何在选项卡之间移动时消除空白空间，同时保持所需的折叠行为的任何想法。

我是 React Native 的新手，正在尝试使用react-native-tab-view. 我想要实现的就像 Twitter 的个人资料 UI。

这是我到目前为止所做的：

粘性标题

我想要实现的是，当用户向下滚动时，选项卡栏将粘在动画标题上。当用户再次向上滚动时，选项卡将慢慢返回到之前的位置。

我尝试了很多方法来做到这一点，但我无法很好地理解它。

这是代码

import ...

const WIDTH = Dimensions.get('screen').width;
const initialLayout = WIDTH;
const HEADER_MAX_HEIGHT = 120;
const HEADER_MIN_HEIGHT = 70;
const PROFILE_IMAGE_MAX_HEIGHT = 80;
const PROFILE_IMAGE_MIN_HEIGHT = 40;
const imgData = [
      // ...
];
const NUM_COLUMNS = 3;
const ProfileScreen = (props) => {

    const [index, setIndex] = useState(0);
    const [isFollowed, setIsFollowed] = useState(false);
    const [enableScrollView, setEnableScrollView] = useState(false);
    const [routes] = React.useState([
      { key: 'post', …