调用不显示的组件

Question

我需要一些帮助。

在我的一个页面中，我调用了一个组件。但是，它不显示。我不确定出了什么问题，以及如何找出错误的确切来源。我知道组件中包含的代码很好，因为我在另一个屏幕中调用它。不知是不是因为'parent' use

  <View style={{width: "66.66%"}}>
       <MapView parent={this} />
       <Text>{"ICIII"}</Text>
  </View>

只有显示的文字（这里的文字只是为了测试）。我希望有人可以帮助我尝试了解问题出在哪里，我知道我还有很多东西要学，所以感谢您的时间和解释。这是组件 MapView :

export default class MapView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: new Animated.Value(0),
      onLoading: true,
      height: 0,
      user_id: 0,
      lang: "en",
      access_token: "",
      stats : "",
      screen_updated: 0,
      map_request_periods: "",
      map_request_periods_title: "",
      map_request_periods_val: "*"
    };
  }

  performMessageFromWebView(e) {
    if (e.nativeEvent && e.nativeEvent.data) {
      let id = e.nativeEvent.data.replace('flightId=', '');

      if (parseInt(id) > 0) {
        this.props.navigation.navigate("UpdateTripsForm", {flightId: parseInt(id)}); // Open Screen UpdateTripForm.js
        return true;
      }
    }
    return false;
  }

  initUserData = async () => {
    let user_id = await retrieveProfileUserId();
    let lang = await retrieveAppLang();
    let user_stats = await getUserFlightStats();
    let access_token = await renewAccessToken();

    if (user_id && lang && access_token && parseInt(user_id) > 0) {
      this.setState({
        user_id: parseInt(user_id),
        lang: lang,
        stats: user_stats,
        access_token: access_token,
      });
    }
  };

  async UNSAFE_componentWillMount() {
    this.initUserData();
  }

  async componentDidMount() {
    // Refresh data
    this.props.navigation.addListener("didFocus", async (payload) => {
      let user_id = await retrieveProfileUserId();
      let user_stats = await getUserFlightStats();
      let access_token = await renewAccessToken();

      if (user_id && access_token && parseInt(user_id) > 0) {
        this.setState({
          screen_updated: this.state.screen_updated + 1,
          user_id: parseInt(user_id),
          stats: user_stats,
          access_token: access_token,
          map_request_periods: "", // Force reinitialize choice
          map_request_periods_title: "",
          map_request_periods_val: "*"
        });
        console.log(Device.DeviceType);
      }

      // Force PORTRAIT orientation
      await ScreenOrientation.getOrientationAsync().then(
        (data_orientation) => {
          if (parseInt(data_orientation) == parseInt(ScreenOrientation.Orientation.LANDSCAPE_LEFT) || parseInt(data_orientation) == parseInt(ScreenOrientation.Orientation.LANDSCAPE_RIGHT)) {
            ScreenOrientation.lockAsync(
              ScreenOrientation.OrientationLock.PORTRAIT_UP
            );
          }
        }
      );
    });

   // const data = this.props.navigation.getParam('this.selectedStartDate', 'this.selectedEndDate');
   //  this.setState({ this.state.selectedStartDate, this.state.selectedEndDate});

    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
    if (this.state.onLoading == true) {
      setTimeout(
        function () {
          this.setState({ onLoading: false });
        }.bind(this),
        3000
      );
    }
  }

  render() {
    return (
      <View>
        <WebView
          geolocationEnabled={true}
          javaScriptEnabled={true}
          scrollEnabled={false}
          overScrollMode="never"
          source={{
            uri:
              "https://www.blzlva.org/fr/mestrips" +
              "?society_id=" + API_SOCIETYID +
              "&user_id=" + this.state.user_id +
              "&lang=" + this.state.lang +
              "&hidezoom=1" +
              "&access_token=" + this.state.access_token +
              "&screen=" + this.state.screen_updated
          }}
          originWhitelist={[
            "https://www.blzblz.org",
            "https://www.blabla.com"
          ]}
          scalesPageToFit={true}
          onMessage={(m) => this.performMessageFromWebView(m)}
          style={{ marginHorizontal: 0, backgroundColor: "transparent" }}
        />
      </View>
    );
  }
}

Answer 1

导入你想在哪个页面使用的地图组件，如下所示，

import Map from '../../map.js'

然后像下面这样在视图中使用组件，

<View style={{width:100px}}>
  <Map/>
</View>

调用不显示的组件

Calling a component that is not displayed

components

parent-child

react-native