Question

读取类组件内的路由参数

2021-04-11

3111

react-native

我正在努力做的是读取“class extends React.Component”中的路由参数。

我有一个像这样构建的页面，它工作正常（因为它是 const，我可以放置 {route}）：

const SecondPage = ({route}) => {
  useEffect(() => {
    fetch('https://myurl', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        aula: route.params.paramKey //HERE WORKS FINE
      })
    }) ...

但在另一个页面中，看起来像下面的代码，我不知道如何读取从上一个屏幕传递的参数

class Newpage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFetching: false,
      isLoading: null,
      tooltipPos: { x: 0, y: 0, visible: false, value: 0 },
      data: {
        labels: ["", "", "", "", "", "", ""],
        datasets: [
            {
                data: [0, 0, 0, 0, 0, 0, 0]
            }
        ]
    }
    };
  }

  getApiData() {
    const self = this;
    fetch('https://anotherurl', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        param: passedParam //HERE I NEED TO HAVE THE PASSED PARAM
      })
    }) ...

这是我传递参数的第一个页面：

renderButtons = () => {
    const { navigation } = this.props;
    return (
      <Block flex>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <TouchableOpacity onPress={() => navigation.navigate("Newpage", {
              idLancamento: item.id,
            })}>

Answer 1

这取决于您的 Newpage 类组件是否是导航容器内的屏幕组件。

如果是，那么您只需使用 this.props.route 访问它。

如果不是，那么您将需要从调用者传递 route 。

例如，您有一个名为 Parent 的屏幕组件，它呈现 NewPage 组件。您将需要像这样传递 route 属性：

    <Newpage route={this.props.route} /> //assuming the Parent is a class.

要读取参数，您可以执行以下操作：

const { idLancamento } = this.props.route.params;

getApiData() {
    const self = this;
    fetch('https://anotherurl', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        param: idLancamento //this is the same of the param passed from navigate call 
      })
    }) ...

Answer 2

如果您使用 '@react-navigation/native';

import {useNavigation} from '@react-navigation/native';   

//pass the params
const navigation = useNavigation();
navigation.navigate('screenname', {userId: 1});


//get the params 
import {useRoute} from '@react-navigation/native';

// it will return userId
 getRouterParams(){
   const route = useRoute();
   const params= route.params.userId;
   console.log(params);
   return params;
}

  this.getRouterParams();