在 NavigatorIOS 中导航返回本机
Navigate back in NavigatorIOS react native
我正在我的 React Native 项目中测试 NavigatorIOS。问题是当我按下按钮从一个组件导航到另一个组件时没有问题但是当我尝试使用 NavigatorIOS 生成的标题栏中的按钮返回时,我收到此错误:"Unsupported top level event "topScroll" dispatched ".
我使用 react-native-cli = 2.0.1 和 react-native = 0.56.0
注意:当我在支持组件中按下 "Go back" 按钮时一切正常。
这是我的代码:
应用组件:
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 };
解决方法是将您的 初始组件 包装在 ScrollView
<ScrollView>
// ... Initial Component code
</ScrollView>
这是一个悬而未决的问题,你可以跟随线索here
我正在我的 React Native 项目中测试 NavigatorIOS。问题是当我按下按钮从一个组件导航到另一个组件时没有问题但是当我尝试使用 NavigatorIOS 生成的标题栏中的按钮返回时,我收到此错误:"Unsupported top level event "topScroll" dispatched ".
我使用 react-native-cli = 2.0.1 和 react-native = 0.56.0
注意:当我在支持组件中按下 "Go back" 按钮时一切正常。
这是我的代码:
应用组件:
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 };
解决方法是将您的 初始组件 包装在 ScrollView
<ScrollView>
// ... Initial Component code
</ScrollView>
这是一个悬而未决的问题,你可以跟随线索here