我对React Native完全陌生。因此,对于非常幼稚的问题,请向我道歉。
我有一个带有按钮的主屏幕。按下按钮后,我想通过另一个组件获取数据并显示在屏幕上。
我有 App.js
import React from 'react';
import { Button, View, Text } from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation'; // Version can be specified in package.json
import {getMovies} from "./fetchmenu.js";
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Menu"
onPress={() => {
<getMovies /> // I want to display data as a result of button press
}}
/>
</View>
</View>
);
}
}
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
和 fetchmenu.js
import React from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
export default class getMovies extends React.Component {
constructor(props){
super(props);
this.state ={ isLoading: true}
}
componentDidMount(){
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.movies,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}
render(){
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
return(
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.title}, {item.releaseYear}</Text>}
keyExtractor={({id}, index) => id}
/>
</View>
);
}
}
如何在主屏幕上显示由 getMovies 创建的 FlatList 当按下按钮时?
答案 0 :(得分:2)
在您的HomeScreen
中,按如下所示设置状态:
state={showMovies:false}
然后在Button
上单击setState
到{showMovies:true}
。在App.js
中的渲染函数中:
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Menu"
onPress={() => {
this.setState({showMovies:true});
}}
/>
{this.state.showMovies&&<GetMovies/>}
</View>
</View>
);
}
由于您将getMovies
类作为默认导出(未命名)进行导出,因此与导入相同:
错误:从“ ./fetchmenu.js”导入{getMovies};
正确:从“ ./fetchmenu.js”导入GetMovies;
我强烈建议您在进入实际项目之前先看一些教程。
编辑
如@Milore所述,React中的组件名称必须以大写字母开头。 See this for further information
答案 1 :(得分:0)
constructor(props){
super(props);
this.state ={ isLoading: true}
}
在dataSource
中看不到this.state
,但您正在使用
this.setState({
isLoading: false,
dataSource: responseJson.movies,
}, function(){
});