如何在 React 本机导航器中使用 Navigator 传递状态

Question

我想使用 react navigator 传递一个状态。我想通过显示：false，所以我的进度条组件将消失。有人可以解释一下我如何做到这一点。非常感谢。

这是我的代码。

import React, { Component } from "react";
import { Button, View, Text, TextInput } from "react-native";
import ContinueButton from "./ContinueButton";
import { CreateAboutMe } from "./StyleSheet/AboutMeStyle";
import * as Progress from "react-native-progress";
export class AboutUser extends Component {
constructor(props) {
super(props);
this.navigatToInterests = this.navigatToInterests.bind(this);
this.checkEntry = this.checkEntry.bind(this);
this.state = {
value: "",
showing: true,
};
}
navigatToInterests = ({ navigation }) => {
let checkDescription = this.state.value;
if (checkDescription === "") {
alert("Please tell people about yourself");
} else {
this.props.navigation.navigate("Interests");
}
};
checkEntry = (Description, value) => {
this.setState({ value: value });
console.log(this.state.value);
};
render() {
return (
<View style={CreateAboutMe.overAllContainer}>
{this.state.showing && (
<Progress.Bar
progress={0.7667}
width={300}
color={"red"}
style={CreateAboutMe.progressbar}
showing={this.state.showing}
/>
)}

Answer 1

你使用的是哪个版本的 React Navigation？

在版本 4 中，您可以使用 navigate 函数的第二个参数发送一些数据，如下所示：

this.props.navigation.navigate("Interests",{"someKey":"someValue", ...});

然后你可以通过 props 抓取下一页的数据：

let someValue = this.props.navigation.getParam('someKey');