react-navigation / react-navigation/react-navigation.github.io
Swipeable TabScreen
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 324
- Forks
- 2k
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
How can I enable swipe in TabScreen?
I want to change screens when the user swipes on it in (Android and IOS).
Is there any property that I am missing?
<Tab.Navigator
initialRouteName="home"
tabBarOptions={{
keyboardHidesTabBar: true,
}}
tabBar={props => <CustomBottomBar {...props} />}>
<Tab.Screen
name="home"
component={HomeScreen}
options={{
tabBarLabel: 'Abc',
}}
/>
<Tab.Screen
name="splash"
component={SplashScreen}
options={{
tabBarLabel: 'Xyz',
}}
/>
</Tab.Navigator>
function CustomTabBar({ state, descriptors, navigation }) {
return (
<View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityStates={isFocused ? ['selected'] : []}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1 }}
>
<Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
{label}
</Text>
</TouchableOpacity>
);
})}
</View>
);
}
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne damit, die Dokumentation zu Tab.Navigator sowie die vorhandenen Android/iOS-Navigationsanleitungen zur Wisch-Konfiguration zu prüfen. Als abgeschlossen gilt die Aufgabe, wenn klar dokumentiert ist, ob die Navigation per Wischen unterstützt wird und, falls ja, wo die erforderliche Konfiguration oder das Beispiel hingehört.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react-native
- Bereich
- documentation, mobile-dev
- Issue-Typ
- Dokumentation
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 35/100