当用户按下视图中的按钮时，在TabBarNavigator中更改活动选项卡

Question

只是一个抬头，我是一名用户体验设计师，学习React Native来制作原型。

我试图找出当用户点击不同选项卡上的视图中的按钮时如何更改活动选项卡。

例如，如果您在主视图上并且有一个用户单击的按钮将其带到设置视图，我希望设置选项卡在视图呈现时显示为活动的底部选项卡。

我目前可以让应用程序导航到新视图，但它仍然会将“主页”选项卡显示为活动选项卡。此外，导航到可通过底部选项卡导航访问的其中一个屏幕时，标题中不应有“后退”按钮。我查看了React Navigation 3.x文档，但找不到任何解决此用例的方法。

这是我目前使用的代码。

<TouchableOpacity
        onPress={() => {
          this.props.navigation.push("Settings");
        }}
      >{...} 
</TouchableOpacity>

Answer 1

在创建底部选项卡导航器时，请确保将设置屏幕作为该选项卡的一部分。

另外，考虑push而不是navigate，因为这是文档建议现在做的v3和更新版本。

参考：https://reactnavigation.org/docs/en/tab-based-navigation.html

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

Answer 2

好吧，首先您需要决定是否要在Android应用的底部或顶部添加标签。我选择了底部，我只有图标，没有文字（我这样做是因为Android上的React Navigation上带有文字的图标非常多，但在iPhone上看起来很好）。以下是一些示例代码：

 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. 
      }
    },
});

您正在使用push功能。哪个推送导航堆栈中的另一个视图。你可以在那里使用replace来不在堆栈中添加另一个视图。另请查看文档中的选项卡导航。

https://reactnavigation.org/docs/en/tab-navigator.html

https://reactnavigation.org/docs/en/bottom-tab-navigator.html