Wie style oder konfiguriere ich die Reagierenavigationsregisterkarten für android, um

Question

zu passen Ich habe eine Registerkartennavigation, die native und react-navigation verwendet Meine 5 Registerkarten sind zu auf Android android gequetscht, aber sehen gut für iOS aus. Wie style ich die Registerkarten, um auf Android zu passen? Kann ich die Registerkarten horizontal scrollen lassen? Ich denke, ich erinnere mich, dass ich das irgendwo gesehen habe - ist das normales Androidenverhalten?

Answer 1

Nun, zuerst müssen Sie entscheiden, ob Sie Tabs am unteren oder oberen Rand Ihrer Android-App möchten. Ich entschied mich für die Unterseite zu gehen, und ich habe nur Symbole, kein Text (Ich tat dies, weil Symbole mit Text auf React Navigation auf Android massenhaft Horrors, aber sieht gut aus auf dem iPhone). Hier ist ein Beispiel-Code für Sie:

import React from 'react'; 
 
import { TabNavigator } from 'react-navigation'; 
 
import { MaterialIcons, Ionicons } from '@expo/vector-icons'; 
 
import { Platform } from 'react-native'; 
 

 
// Import Screens 
 
import Screen1 from '../screens/Screen1'; 
 
import Screen2 from '../screens/Screen2'; 
 

 
export const Tabs = TabNavigator({ 
 
    Screen1: { 
 
    screen: Screen1, 
 
    navigationOptions: { 
 
     tabBarLabel: 'Screen1', 
 
     tabBarIcon: ({ tintColor }) => <MaterialIcons name='account-circle' size={26} style={{ color: tintColor }} /> 
 
    }, 
 
    }, 
 
    Screen2: { 
 
    screen: Screen2, 
 
    navigationOptions: { 
 
     tabBarLabel: 'Screen2', 
 
     tabBarIcon: ({ tintColor }) => <Ionicons name='ios-time' size={26} style={{ color: tintColor }} /> 
 
    }, 
 
    }, 
 
}, { 
 
    headerMode: 'none',  // I don't want a NavBar at top 
 
    tabBarPosition: 'bottom', // So your Android tabs go bottom 
 
    tabBarOptions: { 
 
     activeTintColor: 'red', // Color of tab when pressed 
 
     inactiveTintColor: '#b5b5b5', // Color of tab when not pressed 
 
     showIcon: 'true', // Shows an icon for both iOS and Android 
 
     showLabel: (Platform.OS !== 'android'), //No label for Android 
 
     labelStyle: { 
 
     fontSize: 11, 
 
     }, 
 
     style: { 
 
     backgroundColor: '#fff', // Makes Android tab bar white instead of standard blue 
 
     height: (Platform.OS === 'ios') ? 48 : 50 // I didn't use this in my app, so the numbers may be off. 
 
     } 
 
    }, 
 
});

Sobald ich die Tabs auf den Boden fallen gelassen und nahm das Etikett entfernt, nur das Symbol sieht auf Android in Ordnung und das ist, was ich bin mit für meine App gehen. Viele Android-Apps verwenden nur Text, also könnten Sie das auch tun. Aber du musst immer noch Probs auf den Boden fallen lassen. Ich weiß, dass dies keine langfristige Lösung ist, da ich gerne die Freiheit haben möchte, die Spitze auf Android zu setzen und sie FIT zu haben! Leider war das mein Hack für jetzt. Viel Glück, Junge!

Answer 2

Kommentar here weist darauf hin, dass wir zwischen zwei Plattform swith können styles.Just verwenden:

TabNavigator({ 
    Home: { 
    screen: MyHomeScreen, 
    }, 
    Notifications: { 
    screen: MyNotificationsScreen, 
    }, 
}, { 
    ...TabNavigator.Presets.iOSBottomTabs 
}) 

Answer 3

haben genau das gleiche Problem, ich dieses Problem behoben zu den tabBarOptions eine zusätzliche Stütze durch das Hinzufügen und mit dem RN-Bildschirm Breite Attribute.

Zuerst müssen Sie die Bildschirmbreite greifen.

import {Dimensions} from 'react-native' 
const SCREEN_WIDTH = Dimensions.get('window').width 

Dann innerhalb tabBarOptions fügen Sie eine TabStyle Stütze für die SCREEN_WIDTH und teilen diese durch die Anzahl der Registerkarten, die Sie haben. Ein bisschen hart codiert, aber funktioniert gut für mich!

tabBarOptions{ 
    tabStyle: { 
    width:SCREEN_WIDTH/2 //-> e.g number of screens 
    } 
}