Question

一个头脑，我是一名UX设计师，正在学习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 React上带有文本的图标令人发指，但在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

Answer 3

这似乎很好

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

用户在视图中按下按钮时更改TabBarNavigator中的活动标签

3 个答案: