Swipeable TabScreen
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Anfängerfreundlichkeit
- 35/100
- Issue-Typ
- Dokumentation
- Klarheit
- Muss geklärt werden
- Aktivitätsstatus
- Veraltet
- Tech-Stack
- javascript, react-native
- Bereich
- documentation, mobile-dev
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.
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>
);
}
- Vorherrschende Sprache
- JavaScript
- Sterne
- 324
- Forks
- 2k
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus react-navigation/react-navigation.github.io
-
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 94/100
react-navigation/react-navigation.github.io#1516 · 1 Kommentar ·
-
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 90/100
-
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 72/100
-
Schwierigkeit 1/5 1-3 Stunden Anfängerfreundlichkeit 68/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
Alle Issues in react-navigation/react-navigation.github.io
Ähnliche Issues
-
bug confirmed issue
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
open-webui/open-webui#30750 · 1 Kommentar ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 70/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
-
Mend: dependency security vulnerability untriaged
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 70/100