Question

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

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

Youtube clip of error

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

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

不幸的是，这些都不起作用，我不确定问题出在哪里。

我正在运行什么：

“反应导航”：“ ^ 1.5.11”
“展览”：“ ^ 26.0.0”

React Navigation设置的相关代码段（该剪辑显示了从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,
       });
     });
  }

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

Answer 1

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

Answer 2

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

一旦停止更新并删除了NavigationEvents参数，反弹效果就会消失。

反应本机选项卡导航显示问题

2 个答案: