时间戳

首页 > 解决方案 > 如何在反应原生导航器中使用导航器传递状态

reactjs - 如何在反应原生导航器中使用导航器传递状态

问题描述

我想使用反应导航器传递一个状态。我想通过显示：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}
          />
        )}

标签： reactjsreact-native

解决方案

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

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

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

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

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

推荐阅读