我有三个屏幕,我想用TE标签栏只为首创两个屏幕。在这两个屏幕,我把一个按钮,导航到第三个屏幕。我的第一个形式给出了TIS代码:
import React from "react";
import { Platform } from "react-native";
import {
createStackNavigator,
createBottomTabNavigator,
StackViewTransitionConfigs
} from "react-navigation";
import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";
import LinksScreen from "../screens/LinksScreen";
import SettingsScreen from "../screens/SettingsScreen";
const Tabs = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
tabBarLabel: "Home",
title: "Tahiry",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === "ios"
? `ios-information-circle${focused ? "" : "-outline"}`
: "md-information-circle"
}
/>
)
})
},
Links: {
screen: LinksScreen,
navigationOptions: ({ navigation }) => ({
tabBarLabel: "Links",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === "ios" ? "ios-link" : "md-link"}
/>
)
})
}
});
export default createStackNavigator({
tabs: Tabs,
Settings: SettingsScreen
});
这是工作,但“navigationOptions”不工作,所以如果设置了一个标题为标题(即始终显示即使我设置“标题:空”),它不会出现。我试图与下一个代码的另一种方法,但我不能设法隐藏第三个选项卡项:
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
const HomeStack = createStackNavigator({
Home: HomeScreen,
});
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
/>
),
};
const LinksStack = createStackNavigator({
Links: LinksScreen,
});
LinksStack.navigationOptions = {
tabBarLabel: 'Links',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
/>
),
};
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
});
SettingsStack.navigationOptions = {
tabBarLabel: 'Settings',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
/>
),
};
export default createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
});
任何意见是值得欢迎的。
使用defaultNavigationOptions用于定制的TabBar
defaultNavigationOptions: ({ navigation }) => ({
// You can return any component that you like here!
return <View>
<View>
<Text> Tab 1</Text>
</View>
<View>
<Text> Tab =2</Text>
</View>
</View>
},
}),
如果你想隐藏StackNavigator内的标签,你可以试试这个
const HomeTab = createStackNavigator({
Home:{screen: HomeScreen,},
Settings:{screen: SettingsScreen,}
}, {initialRouteName: 'Home', headerMode: 'none')}
HomeTab.navigationOptions = ({navigation}) => {
let tabBarVisible = true;
if(navigation.state.index > 0){
tabBarVisible = false;
}
return {
tabBarVisible,
}
}
const TabNavi = createBottomTabNavigator({
Home:{screen: HomeTab,},
Links :{screen: LinksScreen,},
})
export default TabNavi;
我终于设法使其工作。该解决方案是从第二种方法。首先,你必须声明你在这样的堆栈sceens:
const HomeStack = createStackNavigator({
Home: HomeScreen,
Details1: DetailsScreen
});
然后你必须单独导入tabBarIcon,我认为它是必要的,因为createStackNavigator没有TabBarIcon方法
import TabBarIcon from "../components/TabBarIcon";
你现在的导航和图标的工作,您可以根据您的堆叠需要添加任意多的屏幕。而你只创建堆栈标签。
下面是完整的例子:
import React from "react";
import {
Platform,
StatusBar,
StyleSheet,
View,
Button,
Text
} from "react-native";
import {
createBottomTabNavigator,
createStackNavigator,
createAppContainer
} from "react-navigation";
import TabBarIcon from "../components/TabBarIcon";
class DetailsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Details1!</Text>
</View>
);
}
}
class DetailsScreen2 extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Details2!</Text>
</View>
);
}
}
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Home!</Text>
<Button
title="Go to Details1"
onPress={() => this.props.navigation.navigate("Details1")}
/>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Settings!</Text>
<Button
title="Go to Details2"
onPress={() => this.props.navigation.navigate("Details2")}
/>
</View>
);
}
}
const HomeStack = createStackNavigator({
Home: HomeScreen,
Details1: DetailsScreen
});
HomeStack.navigationOptions = {
tabBarLabel: "Home",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === "ios"
? `ios-information-circle${focused ? "" : "-outline"}`
: "md-information-circle"
}
/>
)
};
const SettingsStack = createStackNavigator({
Settings: SettingsScreen,
Details2: DetailsScreen2
});
SettingsStack.navigationOptions = {
tabBarLabel: "Maison",
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === "ios"
? `ios-information-circle${focused ? "" : "-outline"}`
: "md-information-circle"
}
/>
)
};
export default createAppContainer(
createBottomTabNavigator(
{
Home: HomeStack,
Settings: SettingsStack
},
{
/* Other configuration remains unchanged */
}
)
);
这是tabBaricon.js的内容
import React from 'react';
import { Icon } from 'expo';
import Colors from '../constants/Colors';
export default class TabBarIcon extends React.Component {
render() {
return (
<Icon.Ionicons
name={this.props.name}
size={26}
style={{ marginBottom: -3 }}
color={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
}
}