RN 之 react-native-tab-navigator 踩坑 TabNavigator

已于 2022-07-26 14:25:41 修改
阅读量1.6k 收藏 2
点赞数 1
分类专栏： 踩坑 文章标签： react native
于 2020-05-25 16:47:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43830193/article/details/106335894
版权

Failed prop type: TabNavigator: prop type tabBarstyle' is invalid, it must be a function, usualy from the prop-types package, but received 'undefined.

报错

原来是组件本身的问题（未定义）

组件文件

类似这种问题，最好的解决办法就是挖根刨地

还有 react  新版本   函数变更影响   按照提示修改就行

把   componentWillReceiveProps   改成 UNSAFE_componentWillReceiveProps

Teddy Boy
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
react-native-scrollable-tab-view：可以在之间滑动的选项卡式导航，每个选项卡可以具有自己的ScrollView，并在滑动之间保持自己的滚动位置。 令人愉快的动画。 可自定义的标签栏
02-05
react-native-scrollable-tab-view 这可能是我在Android上最喜欢的导航模式，但愿它在iOS上更常见！ 这是React Native的非常简单的纯JavaScript实现。 有关此动画背后的工作原理的更多信息，请查看《 反弹”部分。 ...
rn 底部导航栏react-native-tab-navigator
weixin_43294560的博客
08-31 428
1、安装 yarn add react-native-tab-navigato 2、使用 (1)import TabNavigator from 'react-native-tab-navigator'; (2)定义state state={ selectedTab:'' } <TabNavigator sceneStyle={{...}} tabBarStyle tabBarShadowStyle > <TabNavigator.Ite
[RN]android 中TabNavigator放到底部
老汉带你推推推
08-08 295
const BottomTabs = TabNavigator( { Combined: { screen: Combined, path: 'combined', }, Trend: { screen: Trend, path: 'trend',...
React Native Tab Navigator：一款强大的选项卡导航组件
gitblog_00089的博客
03-23 404
React Native Tab Navigator：一款强大的选项卡导航组件 项目地址:https://gitcode.com/exponentjs/react-native-tab-navigator 项目介绍 React Native Tab Navigator 是一款基于 React Native 的选项卡导航组件，可以轻松地实现选项卡导航功能。该项目的 GitHub 链接为：https:...
尝试了多次，才知道TabNavigator的选项卡单击事件
chenpingpi
11-25 175
尝试了多次，才知道点击TabNavigator上的选项卡时触发的是IndexChangedEvent.CHANG
react-native结合react-navigation之TabNavigator
Freewind的专栏
08-13 605
react-native开发需时肯定有tab的切换，或者页面的转调，当然用RN自身的Navigator 也可以但是也不是那么方便react-navigation 就能满足很多大部分需求，如下图的三种切换方式，下面就说下TabNavigator 和StackNavigator的应用，才踏的一个坑，还是太年轻呀，横刀一撸！！！！ 主要的界面 用tab 切换即是TabNavigator， 切换如下...
React-Native 实现点击Tab标签切换Tab页面
07-29
React-Native tabbar 的简单使用
react-native-web-webview:React Native用于RN的WebView的Web实现
05-17
react-native-web-webview React Native用于RN的WebView的Web实现 入门 $ npm install react-native-web-webview --save 别名打包您的webpack配置中： resolve: { alias: { 'react-native': 'react-native-web...
react-native-tab-view：用于React Native的跨平台Tab View组件
02-04
yarn add react-native-tab-view 现在，我们需要安装和 。 如果使用的是Expo，请确保运行兼容版本的库，请运行： expo install react-native-gesture-handler react-native-reanimated 如果您不使用Expo，请运行
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
react-native-rename 只需一个命令即可重命名react-native应用 该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 ...
React Native 之 颜色（七）
qq_35876316的博客
05-20 99
React Native 中的组件是使用 JavaScript 进行样式化的。颜色属性通常与 Web 上的 CSS 工作方式相匹配。
React Native 之 原生组件和核心组件（二）
qq_35876316的博客
05-14 337
在 React Native 中，则使用 React 组件通过 JavaScript 来调用这些视图。在运行时，React Native 为这些组件创建相应的 Android 和 iOS 视图。由于 React Native 组件就是对原生视图的封装，因此使用 React Native 编写的应用外观、感觉和性能与其他任何原生应用一样。React Native 使用与 React 组件相同的 API 结构。React Native 具有许多核心组件，从表单控件到活动指示器，应有尽有。
React Native 之 高度与宽度（四）
qq_35876316的博客
05-17 176
如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。按比例填充屏幕上某一部分，又不想使用 flex 布局，可以在组件的style中使用百分比。React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。
React Native 之 样式使用（三）
qq_35876316的博客
05-15 241
常见的做法是按顺序声明和使用style属性，以借鉴 CSS 中的“层叠”做法（即后声明的属性会覆盖先声明的同名属性）。
React Native 之 开发环境搭建（一）
qq_35876316的博客
05-13 928
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。这包括创建AVD（Android Virtual Device，即Android虚拟机）以模拟Android设备，以及配置必要的Android SDK和构建工具。打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录。
android手机应用源码Imsdroid语音视频通话源码.rar
最新发布
05-20
android手机应用源码Imsdroid语音视频通话源码.rar
营销计划汇报PPT，市场品牌 推广渠道 产品 营销策略tbb.pptx
05-20
营销计划汇报PPT，市场品牌 推广渠道 产品 营销策略tbb.pptx
JavaScript_超过100种语言的纯Javascript OCR.zip
05-20
JavaScript
react-native 滑动标题栏 ts写法 react-native-scrollable-tab-view
06-02
React Native中可以使用第三方库`react-native-scrollable-tab-view`来实现滑动标题栏。以下是一个简单的示例代码： ```tsx import * as React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view'; type Props = {}; const FirstTabScreen = () => { return ( <View style={styles.container}> <Text>First Tab</Text> </View> ); }; const SecondTabScreen = () => { return ( <View style={styles.container}> <Text>Second Tab</Text> </View> ); }; const ScrollableTabNavigator = (props: Props) => { return ( <ScrollableTabView renderTabBar={() => <DefaultTabBar />} tabBarUnderlineStyle={styles.tabBarUnderline} tabBarBackgroundColor="#FFFFFF" tabBarActiveTextColor="#000000" tabBarInactiveTextColor="#999999" > <FirstTabScreen tabLabel="Tab 1" /> <SecondTabScreen tabLabel="Tab 2" /> </ScrollableTabView> ); }; export default ScrollableTabNavigator; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, tabBarUnderline: { backgroundColor: '#000000', height: 2, }, }); ``` 在这个示例中，我们首先导入了`react-native-scrollable-tab-view`库中的`ScrollableTabView`和`DefaultTabBar`组件。然后，我们创建了两个Tab项组件`FirstTabScreen`和`SecondTabScreen`，每个组件中都有一个`tabLabel`属性，用于设置Tab的标签。最后，我们使用`ScrollableTabView`组件来包含Tab项，并设置了一些Tab导航的样式属性，例如`tabBarUnderlineStyle`、`tabBarBackgroundColor`、`tabBarActiveTextColor`和`tabBarInactiveTextColor`。在`renderTabBar`属性中，我们使用了`DefaultTabBar`组件来渲染Tab导航栏。 注意：`react-native-scrollable-tab-view`库已经很久没有更新了，建议使用`react-native-tab-view`等其他替代库。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值