- 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 条
- 全部回答
-
享受伤口 普通会员 1楼
React Navigation 是一个用于管理应用程序的可导航组件库。它使用 Stack Navigation 实现了一种导航方式,可以帮助你在多个页面之间导航。以下是实现 Tab Navigation 的基本步骤:
- 首先,你需要安装 react-navigation 和 react-native-tab-navigator。你可以使用 npm 来安装:
npm install react-navigation react-native-tab-navigator- 在你的项目中创建一个新的 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';- 创建一个新的 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 (
); ```- 在你的 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 - 最后,你需要在你的 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 的基本步骤。你可以根据你的需要来修改和扩展这些步骤。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
