Question

CLASS 1

import moment from "moment";
import InfoScreen from "./InfoScreen";

export default class LaunchingScreen extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: null,
      refreshing: false
    };
  }

//When screen is pulled down this calls for fresh through the state its int

  _onRefresh = () => {
    this.setState({ refreshing: true });
    this.componentDidMount().then(() => {
      this.setState({ refreshing: false });
    });
  };


//Gets data from API 

  componentDidMount() {
    return fetch("https://launchlibrary.net/1.4/launch?mode=verbose")
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          isLoading: false,
          dataSource: responseJson.launches
        });
      })
      .catch(error => {
        console.log(error);
      });
  }


//Renders Screen

  render() {
    //Refresh if statement
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      );
    } else {
      let date = moment().format("dddd, MMMM Do YYYY"); //Gets today's date via moment library

        //Launches is what its called on later to display what is being said in launches
        let launches = this.state.dataSource.map((item, key) => {

        //Location of Launch
        let Location = item.location.name;

        //Date of launch formated 
        let LaunchDate = moment(item.isostart, moment.ISO_8601).format("llll");
        return (
          <View key={key} style={styles.container}>
            <Image
              style={{ width: 350, height: 475, borderRadius: 10 }}
              source={{ uri: item.rocket.imageURL }}
            />

          //WHERE USER TABS TO GET MORE INFO 

            <TouchableHighlight
              onPress={() => this.props.navigation.navigate("InfoScreen")}
            >
              <View style={styles.subcontainer}>
                <Text style={{ paddingBottom: 3 }}>
                  <Text style={styles.TextHeader}>Launch Date: </Text>
                  <Text style={styles.Text}>{LaunchDate}</Text>
                </Text>
                <Text style={{ paddingBottom: 3 }}>
                  <Text style={styles.TextHeader}>Location: </Text>
                  <Text style={styles.Text}>{Location}</Text>
                </Text>
                <Text style={{ paddingBottom: 3 }}>
                  <Text style={styles.TextHeader}>Service Provider: </Text>
                  <Text style={styles.Text}>{item.lsp.name}</Text>
                </Text>
                <Text style={{ paddingBottom: 3 }}>
                  <Text style={styles.TextHeader}>Rocket: </Text>
                  <Text style={styles.Text}>{item.rocket.name}</Text>
                </Text>
              </View>
            </TouchableHighlight>
          </View>
        );
      });

      //Allows the screen to be scrollable w/ refresh control 
      return (
        <View style={styles.Background}>

          <ScrollView
            contentContainerStyle={styles.contentContainer}
            refreshControl={
              <RefreshControl
                refreshing={this.state.refreshing}
                onRefresh={this._onRefresh}
              />
            }
          >
            <View style={styles.dateContainer}>
              <Text style={styles.dateText}>{date}</Text>
            </View>


            {launches}
          </ScrollView>


        </View>
      );
    }
  }
}

CLASS 2

import Location from "./LaunchingScreen.js";

export default class InfoScreen extends React.Component {
  render() {
    return (

        <View>
        <Text>hugig</Text>

        </View>



    );
  }
}

好的，我将尽我所能进行解释。该应用程序基本上以图片中显示的“卡片”形式显示何时，何地等发生火箭发射。我正在使用本机反应，我想做的就是做到这一点，以便当有人点击touchableHighlight（火箭发射“卡”）时，它们会从第1类转到第2类。第2类是任何火箭发射“卡”的信息显示用户点击。我遇到的问题是从用户按下的第2类/信息屏幕的特定火箭发射中获取数据。我已经尝试导出获取名称，日期等的方法，但是没有用。

Answer 1

您只需要传递这样的导航参数

this.props.navigation.navigate("InfoScreen", {
              itemId: 86,
              otherParam: 'anything you want here',
            })

然后在其他屏幕中使用这些参数

const { itemId, otherParam } = this.props.navigation.state.params

您可以了解有关通过参数的更多信息here。

React Native：从一个类到另一个类获取数据

1 个答案: