react-navigation / react-navigation/react-navigation.github.io
Swipeable TabScreen
オープン
まだ誰も着手していません。
- 主要言語
- JavaScript
- スター
- 324
- フォーク
- 2k
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
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>
);
}
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
まず、Tab.Navigator のドキュメントと、スワイプ関連の設定について既存の Android/iOS ナビゲーションガイダンスを確認します。スワイプによるナビゲーションがサポートされているかどうか、サポートされている場合は必要な設定または例をどこに記載すべきかが明確に文書化されていれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react-native
- 領域
- documentation, mobile-dev
- issue の種類
- ドキュメント
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 35/100