我正在开发使用阵营本地(博览会)与之反应,导航模块的应用程序。我竭力要得到我想要的“createBottomTabBar”的风格和自定义标签栏组件工作。
我在哪里可以学习/找到类似这样的例子?是我的代码是否正确?
我用这:Border bottom on Bottom Navigation in React Native和这个视频:https://www.youtube.com/watch?v=w24FE9PZpzk
但我不知道如何进一步得到任何。
路由器/ index.js
import { createSwitchNavigator,createStackNavigator, createBottomTabNavigator, createDrawerNavigator, createAppContainer } from 'react-navigation';
import { Home, SignUpScreen, LoginScreen, ForgotPasswordScreen, Setting, AboutScreen, ScanFlight, FlightDetails, ChatList, ChatMessages, FriendList, exploreProfile, myProfile, FlightAdd, Notifications,Achievements } from '../Screens';
// Tab bar Custom Component
import appBottomTabs from '../NavigationLayout/bottomTabBar'
// Bottom Tab navigation
const MainTabNavigator = createBottomTabNavigator({
Home,
ChatList,
ScanFlight
}, {
tabBarOptions: {
activeTintColor: "#6200EE",
inactiveTintColor: "#858585",
style: {
paddingVertical: 10,
backgroundColor: "#fff",
border: '#ffffff'
},
labelStyle: {
fontSize: 14,
lineHeight: 16,
fontFamily: "Rubik_Regular"
},
tabBarPosition: "bottom",
tabBarComponent: appBottomTabs,
animationEnabled: true,
swipeEnabled: true,
unmountInactiveRoutes: true
}
});
// Drawer Navigation
const appDrawerNavigator = createDrawerNavigator({
Home: {screen: MainTabNavigator},
Login: LoginScreen,
SignUp: SignUpScreen,
ForgotPassword: ForgotPasswordScreen,
Settings: Setting,
About: AboutScreen,
FlightDetails: FlightDetails,
FlightAdd: FlightAdd,
}, {
unmountInactiveRoutes: true
});
const AppLoginNavigator = createSwitchNavigator({
LoginScreen,
ForgotPasswordScreen,
appDrawerNavigator: {
screen: appDrawerNavigator
},
appStackNavigator: {
screen: appStackNavigator
}
});
const AppContainer = createAppContainer(AppLoginNavigator);
class App extends Component {
render() {
return (
<AppContainer />
);
}
}
export default App;
导航布局/底部标签Bar.js
import React, {Component} from 'react'
import {View, TouchableWithoutFeedback, Text, StyleSheet} from 'react-native'
class appBottomTabs extends Component {
constructor(){
super()
this.state = {
routeNameSelected:'Home'
}
}
onPressTab(routeName){
this.props.jumpTo(routeName)
this.setState({
routeNameSelected:routeName
})
}
render() {
const {navigation} = this.props;
const {routes} = navigation.state;
return (
<View style={styles.tabbar}>
{routes && routes.map((route, index) => {
return (
<TouchableWithoutFeedback
key={route.key}
style={styles.tab}
onPress={() => this.onPressTab(route.routeName)}
>
</TouchableWithoutFeedback>
);
})}
</View>
)
}
}
export default appBottomTabs;
这是我的目标实现了布局:https://postimg.cc/Mfc5HxPs
与具有更大的字体大小和边界底部的活动链路。
因此,你需要在defaultNavigationOptions
使用createBottomTabNavigator
。 defaultNavigationOptions发生在一个函数/反应成分在那里你可以回到你的组件。例如
const renderNav = (routeName, name, tintColor, focused) => (
<View style={{flex: 1, alignItems: 'center', borderBottomColor: focused ? tintColor: '', borderBottomWidth: focused ? 4 : 0}}>
<Icon name={name} color={tintColor} size={12} style={{paddingBottom: 4, paddingTop: 10}} />
<Text style={{paddingBottom: 8}}>{routeName}</Text>
</View>
)
const customTabs = ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
if (routeName === 'Profile') {
return renderNav(routeName, 'user', tintColor, focused);
} else if (routeName === 'Home') {
return renderNav(routeName, 'home', tintColor, focused);
} else if (routeName === 'History') {
return renderNav(routeName, 'history', tintColor, focused);
} else if (routeName === 'Cart') {
return renderNav(routeName, 'shopping-cart', tintColor, focused);
}
}
});
const DashboardTabNav = createBottomTabNavigator({
Profile: {
screen: ProfileScreen
},
Home: Dashboard,
History: SettingsScreen,
Cart: CartScreen
},
{
defaultNavigationOptions: customTabs,
animationEnabled: true,
swipeEnabled: true,
tabBarPosition: 'bottom',
initialRouteName: 'Cart',
tabBarOptions: {
activeTintColor: '#6C1D7C',
inactiveTintColor: 'rgba(0,0,0,0.6)',
showLabel: false,
style:{
shadowColor: 'rgba(58,55,55,0.1)',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 1,
shadowRadius: 15,
elevation: 3,
borderTopColor: 'transparent',
backgroundColor:'#fff',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
height: 50
},
activeTabStyle: {
backgroundColor: 'white',
borderBottomWidth: 4,
borderColor: '#6C1D7C'
}
},
});