1

我试图制作一个带有详细信息页面链接的 Hello World 页面。我了解如何使用 StackNavigator 使用功能组件进行导航。但我对它如何从类组件中工作感到困惑。我正在使用 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.something 时，我是否应该绑定“this”或其他东西，它会再次引发类似的错误。这是否与 React native 的新版本 0.61 和缺乏向后兼容性有关 - 或者它是什么？

4

1 回答 1

0

导航来自道具

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

要访问类组件中的道具，请执行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>
    );
  }
}

请阅读有关道具的文档。

于 2020-02-28T18:31:52.237 回答