有条件地切换 React-native 中的元素重叠元素而不是替换答案

【问题标题】：Conditionally toggling element in React-native overlap the element instead replace有条件地切换 React-native 中的元素重叠元素而不是替换
【发布时间】：2021-02-05 11:49:30
【问题描述】：

我有一个标题，我想根据当前页面显示菜单或返回图标。所以我像下面这样有条件地渲染图标

import Icon from 'react-native-vector-icons/Ionicons';
 
const HeaderContainer = ({navigation}) => {
  return (
    <SafeAreaView forceInset={{top: 'never'}}>
      <View
        style={{
          width: '100%',
          flexDirection: 'row',
          alignItems: 'center',
          paddingLeft: 10,
          paddingRight: 10,
        }}>
      <View>
        {navigation.state.routeName !== 'Home' ? (
          <Icon
            name="chevron-back-sharp"
            size={30}
            onPress={() => {
              navigation.goBack();
            }}
          />
        ): (<Icon
          name="ios-menu"
          size={30}
          onPress={() => {
            navigation.toggleDrawer();
          }}
        />)}
      
    </View>
  </SafeAreaView>

const CustomHeader = ({navigation}) => {
  return {
    header: (props) => <HeaderContainer {...props} />,
    headerStyle: {backgroundColor: '#fff'},
    headerTintColor: '#000',
  };
};

const AppNavigator = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen },
    Cart: { screen: CartScreen },
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: ({navigation}) => {
      return CustomHeader(navigation);
    },
  },
);

const AppDrawerNavigator = createDrawerNavigator(
  { App: { screen: AppNavigator } },
  {contentComponent: DrawerContainer},
);

export default AppContainer = createAppContainer(AppDrawerNavigator);

但最初它只加载一个图标，即菜单图标，但是当我更改导航时，菜单和返回图标重叠。请帮助我如何解决这个问题

screenshot

【问题讨论】：

把 backgroundColor 放到视图中看看
是的。这行得通。但这是一个黑客

标签： react-native react-native-ios react-native-navigation

【解决方案1】：

首先，我会在返回标头之前 console.log 导航，看看 routeName 是如何变化的。这可能是因为 initialRouteName 是“Home”。

编辑：您可以在返回之前将 routeName 存储在一个变量中并将其命名为 isHome = navigation.state.routeName，而不是在您选择两个图标之间，只放一个并根据 isHome 更改其属性。

<Icon
  name= !isHome ? "chevron-back-sharp" : "ios-menu"
  size={30}
  onPress={() => !isHome ? navigation.goBack() : navigation.toggleDrawer()}
 />

另一种解决方案是在安装时在主屏幕上设置一个参数

componentDidMount() {
  this.props.navigation.setParams({isHome: true})
 }

然后，isHome = navigation.state && navigation.state.params && navigation.state.params.isHome

【讨论】：

我添加了一个控制台，如下所示 defaultNavigationOptions: ({navigation}) => { console.log(navigation) return CustomHeader(navigation); }，所以。当我从主页路由到购物车屏幕时，我输入了 2 个控制台日志。 1. "state": {"key": "id-1612682328731-0", "routeName": "Home"} 2. "state": {"key": "id-1612682328731-1", "params": undefined, "routeName": "Cart"}
我添加了一个控制台，如下所示 defaultNavigationOptions: ({navigation}) => { console.log(navigation) return CustomHeader(navigation); }，所以。当我从主页路由到购物车屏幕时，我输入了 2 个控制台日志。 “state”：{“key”：“id-1612682328731-0”，“routeName”：“Home”} “state”：{“key”：“id-1612682328731-1”，“params”：未定义，“routeName” ": "Cart"} 不明白为什么会这样。你能帮我解决这个问题吗？
发生这种情况是因为 initialRouteName 是“Home”。我已经编辑了上面的答案，看看它是否有效
当我在 defaultNavigationOptions 返回之前设置 navigation.setParams({isHome: isHome}) 导致无限渲染并达到最大深度错误。作为 hack，对于 Icon 我将背景颜色设置为白色。有效。绝对不是一个好的解决方案，因为两个图标都呈现在其他图标之上，因为背景设置用户看不到下面。我观察到的是，当我 colsole 记录 routeName 时，无论我在哪里更改路线，它都会打印 2 次。就像我从主页路由到购物车屏幕一样。它像首页、购物车、首页、购物车一样打印