Реагировать на проблему с отображением навигации по собственной вкладке - PullRequest
Новая
       10

Реагировать на проблему с отображением навигации по собственной вкладке

0 голосов
/ 06 ноября 2018

Я испытываю проблему с отображением в React Native / React Navigation, когда при переходе на другую вкладку в Навигаторе вкладок при открытии вкладки запускается плохая анимация отказов. Эта проблема возникает только после входа в систему, и после того, как это происходит один или два раза, это больше не повторяется.

Ниже представлен 8-секундный видеоролик о проблеме:

Youtube клип с ошибкой

Что я пробовал до сих пор:

  • InteractionManager.runAfterInteractions в componentDidMount () для предотвращения выборки данных во время анимации навигации

  • Включение и выключение lazyLoad в TabNavigator

  • Принудительная перезагрузка вида карты с помощью 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,
       });
     });
  }

Любые идеи или идеи по этому вопросу очень ценятся!

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

У меня была похожая проблема, когда я переключал видимость MapView, обновляя состояние с помощью функций react-navigation onDidFocus и onWillBlur (из NavigationEvents).

Как только я перестал обновлять это и удалил свой параметр showMap, эффект отскакивания исчез.

0 голосов
/ 06 ноября 2018

Я могу только представить, что здесь происходит, когда вы используете LayoutAnimation где-то, когда происходит это изменение вкладки. Хорошей стратегией при возникновении подобных проблем является удаление кода до тех пор, пока проблема не будет решена, а затем добавление его по частям.

...