React Native 选项卡导航显示问题答案

【问题标题】：React Native Tab Navigation Display IssueReact Native 选项卡导航显示问题
【发布时间】：2018-11-06 03:38:15
【问题描述】：

我在使用 React Native / React Navigation 时遇到了显示问题，其中导航到选项卡导航器中的不同选项卡会导致在选项卡打开时触发错误的弹跳动画。此问题仅在登录后发生，并且发生一两次后就不会再次发生。

以下是该问题的 8 秒视频剪辑：

Youtube clip of error

到目前为止我已经尝试过：

componentDidMount() 中的 InteractionManager.runAfterInteractions 以防止在导航动画期间获取数据
在 TabNavigator 中打开和关闭lazyLoad
在导航到另一个选项卡之前强制使用 this.forceUpdate() 重新加载地图视图

不幸的是，这些都没有奏效，我不确定问题出在哪里。

我在做什么：

“反应导航”：“^1.5.11”
“世博”：“^26.0.0”

React Navigation 设置的相关代码 sn-p（剪辑显示从 userInfo > map > yourEvents 导航：

export default class App extends React.Component {
  render() {
    const Stack = {
      FirstView: {
        screen: TabNavigator(
          {
            map: {
              screen: HomeMapScreen,
              transitionConfig: () => fromLeft(),
              navigationOptions: ({ navigation }) => ({
                header: null
              })
            },
            yourEvents: {
              screen: YourEventsScreen,
              transitionConfig: () => fromLeft(),
              navigationOptions: ({ navigation }) => ({
                header: null
              })
            },
            ...
          },
          {
            navigationOptions: {
              animationEnabled: "false"
            },
            tabBarPosition: "bottom",
            animationEnabled: false,
            swipeEnabled: false,
            tabBarOptions: {
              showIcon: "true", // Shows an icon for both iOS and Android
              style: {
                backgroundColor: "#04151F"
              },
              showLabel: false,
              activeTintColor: "#59C9A5",
              inactiveTintColor: "#F7FFF7",
              labelStyle: {
                fontSize: 10
              },
              iconSize: Platform.OS === "ios" ? 30 : 24
            }
          }
        )
      },
      ...
      userInfo: {
        screen: UserInfo,
        transitionConfig: () => fromLeft(),
        navigationOptions: {
          drawerLabel: <Hidden />
        }
      },
      ...
    };

    const DrawerRoutes = {
      ...
      Home: {
        name: "Home",
        screen: StackNavigator(Stack, {
          initialRouteName: "FirstView",
          transitionConfig: () => fromLeft(),
          headerMode: "none",
          drawerIcon: () => {
            return <Icon name="map" type="foundation" size={30} color={tintColor} />;
          }
        })
      },
      SecondViewStack: {
        name: "SecondViewStack",
        screen: StackNavigator(Stack, {
          initialRouteName: "SecondView",
          transitionConfig: () => fromLeft(),
          icon: () => {
            return <Icon name="map" type="foundation" size={30} color={tintColor} />;
          }
        })
      }
    };

    const RootNavigator = StackNavigator(
      {
        Drawer: {
          name: "Drawer",
          screen: DrawerNavigator(DrawerRoutes, {
            drawerBackgroundColor: "#D8DDEF",
            transitionConfig: () => fromLeft(),
            contentComponent: DrawerContent,
            contentOptions: {
              backgroundColor: 'black',
              flex: 1
            },
          })
        },
        ...Stack
      },
      {
        headerMode: "none"
      }
    );

    return (
      <Provider store={store}>
        <View style={styles.container}>
          <MyStatusBar translucent backgroundColor="#04151F" barStyle="light-content" />
          <RootNavigator />
        </View>
      </Provider>
    );
  }
}

加载时显示“弹跳”问题的组件片段：

class YourEventsScreen extends Component {
  state = {
    attendingEvents: true,
    ownedEvents: false,
    isLogoutVisible: false,
    animatePressAttend: new Animated.Value(1),
    animatePressHost: new Animated.Value(1),
    didFinishInitialAnimation: false,
  }

  static navigationOptions = {
    title: "Your Events",
    headerLeft: null,
    tabBarIcon: ({ tintColor }) => {
      return <Icon name="calendar" size={30} color={tintColor} type="entypo"/>;
    }
  };

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.props.fetchOwnedEvents(this.props.currentUser.userId);
      this.props.fetchAttendingEvents(this.props.currentUser.attendingEvents);

      this.setState({
        ...this.state,
         didFinishInitialAnimation: true,
       });
     });
  }

非常感谢您对此处问题的任何想法或见解！

【问题讨论】：

你解决了吗？

标签： javascript reactjs react-native react-navigation expo

【解决方案1】：

我只能想象这里发生的事情是，当此选项卡发生更改时，您正在某处使用 LayoutAnimation。遇到此类问题时，一个好的策略是删除代码，直到问题解决，然后逐段添加。

【讨论】：

感谢您的评论！唯一的事情是，我没有在我的应用程序的任何地方使用 LayoutAnimation，除非这是默认启用的并且必须明确关闭。但我一定会尝试研究与动画相关的错误
您正在使用的库可能在您不知情的情况下使用了 LayoutAnimation！

【解决方案2】：

当我通过使用react-navigation 的onDidFocus 和onWillBlur 函数（来自NavigationEvents）更新状态来切换MapView 的可见性时，我遇到了类似的问题。

一旦我停止更新并删除我的 showMap 参数，弹跳效果就消失了。

【讨论】：