Навигация обратно в NavigatorIOS реагирует на родную

Я тестирую NavigatorIOS в моем собственном проекте. проблема в том, что когда я нажимаю кнопки для перехода от одного компонента к другому, проблем не возникает, но когда я пытаюсь вернуться с кнопкой в ​​строке заголовка, созданной NavigatorIOS, я получаю эту ошибку: "Неподдерживаемое событие верхнего уровня"topScroll" отправил".

Я использую response-native-cli = 2.0.1 и реагирует-native = 0.56.0

ПРИМЕЧАНИЕ: все в порядке, когда я нажимаю кнопку "Вернуться" в компоненте поддержки.

вот мой код:

Компонент приложения:

import React, { Component } from "react";
import { View, NavigatorIOS } from "react-native";

import { NavigationApp } from "./src/components/index.js";

export default class App extends Component {
  render() {
    return (
      <NavigatorIOS
        style={{ flex: 1 }}
        initialRoute={{
          title: "Navigation app",
          component: NavigationApp
        }}
      />
    );
  }
}

Компонент NavigationApp:

import React, { Component } from "react";
import { Text, View, Button, NavigatorIOS } from "react-native";
import { Support } from "./index.js";

class NavigationApp extends Component {
  navigateToSupport = () => {
    this.props.navigator.push({
      title: "Support",
      component: Support
    });
  };

  render() {
    const { containerStyle } = styles;
    return (
      <View style={containerStyle}>
        <Button
          title="Go to support page"
          onPress={this.navigateToSupport}
        />
      </View>
    );
  }
}

const styles = {
  containerStyle: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
};

export { NavigationApp };

Компонент поддержки:

import React, { Component } from "react";
import { View, Text, Button } from "react-native";

class Support extends Component {
  backAction = () => {
    this.props.navigator.pop();
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems:"center" }}>
        <Text>You are in support page</Text>
        <Button title="Go back" onPress={this.backAction} />
      </View>
    );
  }
}

export { Support };

1 ответ

Решение

Обходной путь будет заключаться в том, чтобы обернуть ваш начальный компонент в ScrollView

<ScrollView>
  // ... Initial Component code 
</ScrollView>

Это открытый вопрос, вы можете следовать указаниям здесь

Другие вопросы по тегам