如何使用 createBottomTabNavigator 将 TouchableWithoutFeedback 和 TouchableNativeFeedback 呈现为选项卡按钮？答案

【问题标题】：How to render TouchableWithoutFeedback and TouchableNativeFeedback as tab buttons with createBottomTabNavigator?如何使用 createBottomTabNavigator 将 TouchableWithoutFeedback 和 TouchableNativeFeedback 呈现为选项卡按钮？
【发布时间】：2020-07-22 12:19:12
【问题描述】：

我正在尝试使用createBottomTabNavigator（来自@react-navigation/bottom-tabs v5）。我唯一不能改变的是标签按钮。默认值很好，但我想在 Android 上使用 TouchableNativeFeedback，在 iOS 上使用 TouchableWithoutFeedback（默认值）。

所以我创建了this snack，唯一正确渲染的Touchable是TouchableOpacity，其他的在视觉上被破坏并且按下时没有效果（导航不起作用）。

正确渲染TouchableNativeFeedback 和TouchableWithoutFeedback 缺少什么？

import React from 'react';
import {
  Text,
  TouchableOpacity,
  TouchableWithoutFeedback,
  TouchableNativeFeedback,
  StyleSheet,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const ScreenWithoutFeedback = () => <Text>Without Feedback</Text>;
const ScreenOpacity = () => <Text>Opacity</Text>;
const ScreenNativeFeedback = () => <Text>Native Feedback</Text>;

const buttonWithoutFeedback = (props) => (
  <TouchableWithoutFeedback {...props} />
);

const buttonOpacity = (props) => <TouchableOpacity {...props} />;

// I didn't set the Ripple yet because it isn't rendering correctly
const buttonNativeFeedback = (props) => <TouchableNativeFeedback {...props} />;

const TabNavigator = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <TabNavigator.Navigator
        initialRouteName="Collect"
        tabBarOptions={{
          activeTintColor: '#2962ff',
          inactiveTintColor: '#666',
          labelStyle: {
            fontSize: 12,
          },
          tabStyle: {
            maxWidth: 168,
            minWidth: 80,
            paddingHorizontal: 12,
            paddingTop: 8,
            paddingBottom: 12,
          },
          style: {
            alignItems: 'center',
            height: 56,
          },
        }}>
        <TabNavigator.Screen
          name="Without"
          component={ScreenWithoutFeedback}
          options={{
            tabBarIcon: ({ color }) => (
              <MaterialCommunityIcons name="account" color={color} size={24} />
            ),
            tabBarLabel: 'WithoutFeedback',
            tabBarButton: buttonWithoutFeedback,
          }}
        />
        <TabNavigator.Screen
          name="Opacity"
          component={ScreenOpacity}
          options={{
            tabBarIcon: ({ color }) => (
              <MaterialCommunityIcons name="settings" color={color} size={24} />
            ),
            tabBarLabel: 'Opacity',
            tabBarButton: buttonOpacity,
          }}
        />
        <TabNavigator.Screen
          name="Native"
          component={ScreenNativeFeedback}
          options={{
            tabBarIcon: ({ color }) => (
              <MaterialCommunityIcons name="logout" color={color} size={24} />
            ),
            tabBarLabel: 'NativeFeedback',
            tabBarButton: buttonNativeFeedback,
          }}
        />
      </TabNavigator.Navigator>
    </NavigationContainer>
  );
}

当前结果：

我知道有一个createMaterialBottomTabNavigator（来自@react-navigation/material-bottom-tabs），但是使用它我需要配置更多我无法在我的测试中使用的东西。

【问题讨论】：

标签： react-native react-native-navigation react-navigation-bottom-tab

【解决方案1】：

要修复它，在 Touchable 中渲染 <View> 并在该视图中渲染 children。此外，style 属性应传递给<View>。

TouchableNativeFeedback

const buttonNativeFeedback = ({ children, style, ...props }) => (
  <TouchableNativeFeedback
    {...props}
    useForeground={true}
    background={TouchableNativeFeedback.Ripple('#2962ff1f', true)}>
    <View style={style}>{children}</View>
  </TouchableNativeFeedback>
);

TouchableWithoutFeedback

const buttonWithoutFeedback = ({ children, style, ...props }) => (
  <TouchableWithoutFeedback {...props}>
    <View style={style}>{children}</View>
  </TouchableWithoutFeedback>
);

Snack with the working code.

【讨论】：