Я пытаюсь разделить вкладки на экране по отдельности, когда они не выровнены каким-либо образом на экране и все еще могут функционировать как кнопки вкладок и страницы для сохранения отредактированных страниц при возврате к ним. В настоящее время он работает только тогда, когда они выровнены и находятся внутри панели вкладок. У кого-нибудь есть способ сделать это? Я протестировал 2 блока кода, которые я опубликую ниже.
импорт:
импорт React из 'реакции'
import {StyleSheet, Text, View, Image} из'act-native '
import {createBottomTabNavigator, createAppContainer} из «реакции-навигации»
import {widthPercentageToDP as wp, heightPercentageToDP as hp} из'act-native-responseive-screen '
Первый фрагмент кода:
class DocSelection extends React.Component{
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}>!!!!!####$$$$$$</Text>
</View>
)
}
}
class Printing extends React.Component{
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}>hfhdfjedhfeehfjeh</Text>
</View>
)
}
}
class Design extends React.Component{
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}>874877847484787</Text>
</View>
)
}
}
const tabIcon= (navigation, focused) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'DocSelection') {
iconName = require("../Icons/account.png");
}
else if (routeName === 'Printing') {
iconName = require("../Icons/change.png");
}
else if (routeName === 'Design') {
iconName = require("../Icons/padlock.png");
}
return <Image source={iconName}
style={{ width: 40, height: 40, top: hp('0%'), left: wp('0%'), tintColor: focused ? "#0D9DCE":"#9B9B9B"}} />
};
const SettingsNavigation = createBottomTabNavigator(
{
'DocSelection':{
screen: DocSelection,
},
'Printing':{
screen: Printing,
},
'Design':{
screen: Design,
}
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: () =>
tabIcon(navigation),
}),
tabBarOptions: {
labelStyle: {
display:"none"
},
style: {
backgroundColor: '#262A2C',
top:-100,
height:0,
borderTopWidth: 0,
}
},
}
)
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#262A2C',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color:"black"
},
});
export default createAppContainer(SettingsNavigation);
Второй кусок кода:
class DocSelection extends React.Component{
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}>!!!!!##########%%%%%</Text>
</View>
)
}
}
class Printing extends React.Component{
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}>hfhdfjedhfeehfjeh</Text>
</View>
)
}
}
class Design extends React.Component{
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}>874877847484787</Text>
</View>
)
}
}
const RouteConfigs = {
'Home': {
screen: DocSelection,
navigationOptions: {
tabBarButtonComponent: ,
tabBarIcon: ({ tintColor, horizontal }) => (
<Image
style={{margin: 15, width: 35, height: 35, tintColor: "red"}}
source={require("../Icons/home.png")}
/>
),
},
},
'Order history':{
screen: Printing,
navigationOptions: {
backgroundColor: '#262A2C',
top:-60,
borderTopWidth: 0,
tabBarIcon: ({ tintColor }) => (
<Image
style={{width: 32, height: 32, tintColor: "red"}}
source={require("../Icons/history-clock-button.png")}
/>
),
},
},
'Customer service':{
screen: Design,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Image
style={{top:-100, margin: 15, width: 40, height: 40, tintColor: "red"}}
source={require("../Icons/customer-service.png")}
/>
),
},
},
};
const DrawerNavigatorConfig = {
intialRouteName: 'Home',
navigationOptions: {
tabBarVisible: false
},
tabBarOptions: {
tabStyle:{
top:-70,
height:100
},
showLabel: false
},
};
const Navigator = createBottomTabNavigator(RouteConfigs, DrawerNavigatorConfig);
export default createAppContainer(Navigator);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
}
});