Question

我是React Native的新手。我尝试使用screenProps将获取的数据传递到选项卡屏幕。但是，当我尝试使用this.props.ScreenProps从我的屏幕调用数据时，我的屏幕无法获取数据。你能查看我的代码并纠正我的错误吗？

提前致谢！

这是我的代码：

TabNavigator的：

import React, { Component } from 'react'
import { StyleSheet, View, Text, TouchableOpacity, Platform } from 'react-native'
import { Ionicons } from '@expo/vector-icons';
import { TabNavigator, TabBarBottom } from 'react-navigation';

export default class RecentPage extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: 'Recent'
    }
  }
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      page: 1,
      serviceId: 0,
      stateId: 0,
    }
  }
  param = "?page=" + this.state.page + "&serviceId=" + this.state.serviceId + "&stateId=" + this.state.stateId
  (console.log(param))
  componentDidMount() {
    console.log("param", param)
    fetch(`${COMMON_APP.HOST_API}/api/Request/GetAllRequest${param}`)
      .then((response) => {
        if (response.status != 200) {
          throw new Error("not valid");
        }
        this.setState({ data: response.json() })
        console.log("data",this.state.data)
      })
      .catch((error) => {
        setTimeout(() => {
          alert("We have error!")
        }, 3000)
      });
  }
  render() {
    // const MOCK_DATA = this.state.data
    // return MOCK_DATA
    return(
    <TabNav
      screenProps={{data: this.state.data}}
      {...this.props}
      {...console.log("data:",this.state.data)}
    />
    )
  }

}

这是我的一个屏幕：

export default class MapTabItem extends Component {
  constructor(props) {
    super(props);
    const {screenProps} = this.props; 
    this.state = {
      location: { coords: { latitude: 20.1291, longitude: 105.3131 } },
      markers: screenProps.data,
      //markers: MOCK_DATA,
      region: {
        latitude: 20.1291,
        longitude: 105.3131,
        latitudeDelta: 0.1,
        longitudeDelta: 0.1 * ASPECT_RATIO,
      },
    };
  }

  componentWillMount() {
    this._getLocationAsync();
    console.log("marker:", this.state.markers)
    // the markers is undefined
  }

Answer 1

为父级

import React from 'react';
import ChildrenComponent from "./ChildrenComponent";

export default class MotherComponent extends React.Component {
  render() {
    return (
      <ChildrenComponent whichQuery="Child2ComponentMutationQuery" />
    );
  }
}

ChildrenComponent

import React from 'react';
import PropTypes from 'prop-types';
import GrandsonComponent from "./GrandsonComponent";

export default class ChildrenComponent extends React.Component {
    render() {

        const {whichQuery} = this.props;
        console.log('From Mother:', whichQuery);

        return (
            <View><Text>{whichQuery}</Text></View>
        );
    };

    ChildrenComponent.propTypes = {
        whichQuery: PropTypes.string
    };
}

希望它会有所帮助

将screenProps传递给TabNavigator

1 个答案: