React Native小白(超简单精致的底部导航栏):使用react-native-tab-navigator实现底部导航栏（二）

最新推荐文章于 2024-09-10 05:36:05 发布

吴易烦_wuli

最新推荐文章于 2024-09-10 05:36:05 发布

阅读量384

点赞数 1

本文链接：https://blog.csdn.net/weixin_46043752/article/details/118015929

版权

本文介绍了如何使用 react-native-tab-navigator 在 React Native 应用中创建一个简单的底部导航栏。通过添加必要依赖并引入组件，实现了点击顶部输入框按钮激活底部导航栏的功能。

摘要由CSDN通过智能技术生成

实现效果如下：

点击顶部输入框按钮可以实现输入。

在这里插入图片描述

首先需要安装：

npm install react-native-tab-navigator --save

然后在需要做导航栏的文件引入：

import TabNavigator from 'react-native-tab-navigator';

下面就可以编写顶部导航栏了，以下是完整代码：

import React, {
    Component } from 'react'
import {
   
  Image,
  Text,
  TextInput,
  View,
  Platform,
  StyleSheet
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

export default class BottomTabBar extends Component {
   
  /*初始化state*/
  constructor(props) {
   
    super();
    this.state = {
   <