账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react-navigation tab-navigation效果实现
    55
    0

    使用react-natvigation实现tab动态的气泡,气泡需要根据业务情况改变显隐状态,已知设置navigationOptions的tabBarIcon,无法根据业务需求动态改变tabBar的显隐状态,使用页面中元素绝对定位的方法,没法覆盖底部栏,即使zIndex设置到99999

    static navigationOptions = {
        tabBarLabel: '标签',
        tabBarIcon: ({
          tintColor,
          focused
        }) => (
        <View>
        <View style={[TabNavStyle.TabNavIconBubble,{display:RecipeScreen.bubble?'flex':'none'}]}></View>
          <IconFont
          name='recipe'
          size={26}
          style={{ color: tintColor,...Platform.select({ios:{marginTop:-15}})}}
        />
      </View>
        ),
      }
    
    
    render() {
        let {
          navigation
        } = this.props;
        let {
          navigate
        } = navigation;
        let {hosName,recipeList} = this.state;
        return (
          <BaseScreen hosName={hosName} banner="边栏" navigation={navigation} >
          <View style={{backgroundColor:'red',borderRadius:5,zIndex:65530,position:'absolute',width:10,height:10,left:30,bottom:-height+170}}></View>
       )}
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 享受伤口 普通会员 1楼

      React Navigation 是一个用于管理应用程序的可导航组件库。它使用 Stack Navigation 实现了一种导航方式,可以帮助你在多个页面之间导航。以下是实现 Tab Navigation 的基本步骤:

      1. 首先,你需要安装 react-navigation 和 react-native-tab-navigator。你可以使用 npm 来安装:

      npm install react-navigation react-native-tab-navigator

      1. 在你的项目中创建一个新的 App.js 文件,并在其中导入 react-navigation 和 react-native-tab-navigator:

      javascript import React from 'react'; import { NavigationContainer } from 'react-navigation'; import { TabNavigator } from 'react-native-tab-navigator';

      1. 创建一个新的 screens,并在 screens 中使用 TabNavigator。例如,你可以创建一个 Home screen,一个 About screen 和一个 Settings screen。

      ```javascript import { createStackNavigator } from 'react-navigation/stack'; import Home from './screens/Home'; import About from './screens/About'; import Settings from './screens/Settings';

      const Stack = createStackNavigator();

      return ( ); ```

      1. 在你的 screens.js 文件中,你可以使用 TabNavigator 来管理 Tab。例如,你可以创建一个 Tab 的 state,并在 Tab 的 navigate 方法中更改它的 content。

      ```javascript import React from 'react'; import { View, Text, TouchableOpacity } from 'react-native';

      const Tab = ({ name, onPress }) => { return ( {name} ); };

      return ( console.log('Home screen pressed')}> Home screen console.log('About screen pressed')}> About screen console.log('Settings screen pressed')}> Settings screen ); ```

      1. 最后,你需要在你的 App.js 文件中使用 TabNavigator 的 navigationOptions。例如,你可以使用 navigationOptions 来定义 screen 的标题和文字。

      ```javascript import { NavigationContainer } from 'react-navigation'; import { TabNavigator } from 'react-native-tab-navigator'; import Home from './screens/Home'; import About from './screens/About'; import Settings from './screens/Settings';

      const Stack = createStackNavigator();

      return ( ); ```

      以上就是在 React Navigation 中实现 Tab Navigation 的基本步骤。你可以根据你的需要来修改和扩展这些步骤。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部