如何从React Native中的类组件调用StackNavigator

Question

我正在尝试制作一个Hello World页面，其中包含一个详细信息页面的链接。我了解如何使用StackNavigator使用功能组件进行导航。但我对它如何从类组件工作感到困惑。Im使用react navigation 5.x和react Native 0.61如何将其转换为基于类的组件语法(因为大多数教程都遵循该语法，而不是新的功能组件(。

当我们使用功能组件时——从React Native 0.61开始——方法是这样做：

function WelcomePage({ navigation }) {
return (
<View style={styles.container}>
<Text style={styles.heading} >Welcome!</Text>
</View>
)
}

但是，当我在类中尝试这样做时，我如何使它调用导航或从导航继承？

export default class HelloWorld extends Component<Props> {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, world!</Text>
<TouchableOpacity onPress={() => navigation.navigate('Details') }><Text>Go to Details</Text></TouchableOpacity>
</View>
);
}
}

它给了我这个错误(见屏幕截图(。每当我尝试这个时，我应该绑定"this"或其他什么吗？如果再次绑定，会出现类似的错误。这与React native的新版本0.61和缺乏向后兼容性有关吗？或者是什么？

Answer 1

导航来自道具

//                       props
function WelcomePage({ navigation }) { ... }

要访问类组件中的props，请执行this.props.navigation。

在你的例子中，它将是

export default class HelloWorld extends Component<Props> {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>Hello, world!</Text>
{/*                                 getting navigation from props*/}
<TouchableOpacity onPress={() => this.props.navigation.navigate('Details') }><Text>Go to Details</Text></TouchableOpacity>
</View>
);
}
}

请阅读有关道具的文档。