如何在React Native导航器中使用导航器传递状态

时间:2020-06-28 20:37:29

标签: reactjs react-native

我想使用react导航器传递状态。我想通过显示: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}
          />
        )}

1 个答案:

答案 0 :(得分:0)

您正在使用哪个版本的React Navigation?

在版本4中,您可以使用以下导航功能的第二个参数发送一些数据:

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

然后您可以通过道具在下一页中获取数据:

let someValue = this.props.navigation.getParam('someKey');
相关问题