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类/信息屏幕的特定火箭发射中获取数据。我已经尝试导出获取名称,日期等的方法,但是没有用。
答案 0 :(得分:1)
您只需要传递这样的导航参数
this.props.navigation.navigate("InfoScreen", {
itemId: 86,
otherParam: 'anything you want here',
})
然后在其他屏幕中使用这些参数
const { itemId, otherParam } = this.props.navigation.state.params
您可以了解有关通过参数的更多信息here。