React-native 自定义组件使用

1.新建一个文件夹 396527ED-B0AC-436D-925C-948DA721F72C.png
2.创建一个js文件 204EC9DD-7463-47E7-8E13-C95C633AFEF4.png
3.写js文件内容
import React, { Component } from 'react';

import {
Platform,
StyleSheet,
Text,
View,
ListView,
Image
} from 'react-native';

const REQUEST_Url = 'https://api.douban.com/v2/movie/top250'
//网络请求的地址

class OneView extends Component{
constructor(props){
super(props);
this.state={
movies:new ListView.DataSource({ //相当于 ios 的属性
rowHasChanged:(row1,row2) => row2 !== row1
}),
loaded:false //相当于 ios 的属性
};
this.fetchData(); //http请求数据
}

//数据请求
fetchData() {
console.log('数据')
fetch(REQUEST_Url)
.then(response => response.json())
.then((responseData) => {
this.setState({//给属性设置，如果值有变化就会去刷新数据
movies :this.state.movies.cloneWithRows(responseData.subjects),
loaded:true,
});
})
.done()

}

//cell 数据的展示 这是一个函数
renderMovieList(movie){
<View>
<View>
<Image source={{uri:movie.images.medium}} style={styles.movieStyle}/>
<Text>{movie.title}</Text>
</View>

        </View>

    );
}


render() {
    if(!this.state.loaded){
        return(
            <View>
                <Text>加载中</Text>
            </View>
        );

    }
    return (
        <ListView
            dataSource={this.state.movies}
            renderRow={this.renderMovieList}
        />

    );
}

}

const styles = StyleSheet.create({
movieStyle:{
width:120,
height:120,
},
movieText:{
width:100,
height:50,
fontSize:15,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});

export {OneView as default}