javascript - 带有 React Navigation 的 React Native 固定页脚
问题描述
我正在使用"react-navigation": "^2.11.2"
并有TabNavigator()
3 个选项卡:A、B 和 C。
所以我使用:
...
_Profile: {
screen: TabNavigator(
{
First: A,
Second: B,
Third: C
},
{
tabBarPosition: "top",
swipeEnabled: true,
lazy: false
}
),
navigationOptions: ({ navigation }) => ({
header: <ProfileHeader navigation={navigation} />
})
},
...
我想在页面 A 和 B 中有一个固定的页脚,但不是在 C 中。
首先,我尝试在每个 A 和 B 中创建一个页脚,但结果与我想要的不同,请参见下图:
但是当我尝试滑动到选项卡 B 时,您可以看到页脚未修复:
对此有任何想法吗?
提前致谢!
解决方案
我问了贡献者,从现在开始我们有一个完整的例子:
带页脚的自定义标签:
更新
我猜链接坏了,所以我把代码贴在这里:
import React from "react";
import {
LayoutAnimation,
View,
StyleSheet,
StatusBar,
Text
} from "react-native";
import { SafeAreaView, createMaterialTopTabNavigator } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
import { Button } from "./commonComponents/ButtonWithMargin";
class MyHomeScreen extends React.Component {
static navigationOptions = {
tabBarLabel: "Home",
tabBarIcon: ({ tintColor, focused, horizontal }) => (
<Ionicons
name={focused ? "ios-home" : "ios-home"}
size={horizontal ? 20 : 26}
style={{ color: tintColor }}
/>
)
};
render() {
const { navigation } = this.props;
return (
<SafeAreaView forceInset={{ horizontal: "always", top: "always" }}>
<Text>Home Screen</Text>
<Button
onPress={() => navigation.navigate("Home")}
title="Go to home tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
);
}
}
class RecommendedScreen extends React.Component {
static navigationOptions = {
tabBarLabel: "Recommended",
tabBarIcon: ({ tintColor, focused, horizontal }) => (
<Ionicons
name={focused ? "ios-people" : "ios-people"}
size={horizontal ? 20 : 26}
style={{ color: tintColor }}
/>
)
};
render() {
const { navigation } = this.props;
return (
<SafeAreaView forceInset={{ horizontal: "always", top: "always" }}>
<Text>Recommended Screen</Text>
<Button
onPress={() => navigation.navigate("Home")}
title="Go to home tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
);
}
}
class FeaturedScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
tabBarLabel: "Featured",
tabBarIcon: ({ tintColor, focused, horizontal }) => (
<Ionicons
name={focused ? "ios-star" : "ios-star"}
size={horizontal ? 20 : 26}
style={{ color: tintColor }}
/>
)
});
render() {
const { navigation } = this.props;
return (
<SafeAreaView forceInset={{ horizontal: "always", top: "always" }}>
<Text>Featured Screen</Text>
<Button
onPress={() => navigation.navigate("Home")}
title="Go to home tab"
/>
<Button onPress={() => navigation.goBack(null)} title="Go back" />
</SafeAreaView>
);
}
}
const SimpleTabs = createMaterialTopTabNavigator({
Home: MyHomeScreen,
Recommended: RecommendedScreen,
Featured: FeaturedScreen
});
class TabNavigator extends React.Component {
static router = SimpleTabs.router;
componentWillUpdate() {
LayoutAnimation.easeInEaseOut();
}
render() {
const { navigation } = this.props;
const { routes, index } = navigation.state;
const activeRoute = routes[index];
let bottom = null;
if (activeRoute.routeName !== "Home") {
bottom = (
<View style={{ height: 50, borderTopWidth: StyleSheet.hairlineWidth }}>
<Button title="Check out" onPress={() => {}} />
</View>
);
}
return (
<View style={{ flex: 1 }}>
<StatusBar barStyle="default" />
<SafeAreaView
style={{ flex: 1 }}
forceInset={{ horizontal: "always", top: "always" }}
>
<SimpleTabs navigation={navigation} />
</SafeAreaView>
{bottom}
</View>
);
}
}
export default TabNavigator;
推荐阅读
- numpy - 计算多维数据数组中某个值的百分位排名
- arrays - 如何将所有值从 Vector 传递给 Sub?
- reactjs - 如何使用我的函数组件道具通过 usestate() 设置我的状态?
- apache-spark - Graphframes:Spark Graphframes 中两个顶点列表之间的 BFS
- react-native - 如何在 React Native 中同时获得按钮单击导航和触摸滑动导航?
- javascript - 如何将我创建的文件导出到我的 app.js
- typescript - 为什么 TypeScript 不正确返回被覆盖的方法,即使它不可访问?
- dialogflow-es - Intent 检测正则表达式实体
- twig - 用 if 测试一个值
- javascript - 拆分字符串以进行 CSV 格式设置