react native demo工程之listview和网络请求

发表于 | 更新于:
字数统计: 308 | 阅读时长 ≈ 1

react native demo工程之listview和网络请求

网络请求数据 userList的数据

{“lastPage”:true,”pageSize”:10,”pageNumber”:1,”firstPage”:true,”list”:[{“content”:”内容。。。。。。。这里是内容”,”id”:1,”title”:”标题”},{“content”:”test 1”,”id”:2,”title”:”test 1”},{“content”:”test 2”,”id”:3,”title”:”test 2”},{“content”:”test 3”,”id”:4,”title”:”test 3”},{“content”:”test 4”,”id”:5,”title”:”test 4”}],”totalRow”:5,”totalPage”:1}

index.android.js

/**

import React, {
Component,
} from ‘react’;

import {
AppRegistry,
Image,
StyleSheet,
Text,
View,
ListView,
} from ‘react-native’;

var REQUEST_URL = ‘http://10.10.18.221:8080/jfinal/userList';

export default class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
}

componentDidMount(){
    this.fetchData();
}

fetchData() {
    fetch(REQUEST_URL)
        .then((response) => response.json())
        .then((responseData) => {
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(responseData.list),
                loaded: true,
            });
        })
        .done();
}

render() {
    if (!this.state.loaded) {
        return this.renderLoadingView();
    }

    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderMovie}
            style={styles.listView}
        />
    );
}

renderLoadingView()
{
    return (<View style={styles.container} >
            <Text>Loading movies......</Text>
        </View>

    );
}

renderMovie(blog) {
    return (
        <View style={styles.container}>

            <View >
                <Text style={styles.title} >{blog.title}</Text> 
                <Text style={styles.content} >{blog.content}</Text> 
            </View>
        </View>
    );
}

};

var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: ‘row’,
justifyContent: ‘flex-start’,
alignItems: ‘flex-start’,
backgroundColor: ‘#F5FCFF’,
},
rightContainer: {
flex: 1,
},
title: {
fontSize: 20,
marginBottom: 8,
paddingLeft: 5,
textAlign: ‘left’,
},
content: {
fontSize: 12,
paddingLeft: 5,
textAlign: ‘left’,
},
year: {
textAlign: ‘center’,
},
thumbnail: {
width: 53,
height: 81,
},
listView: {
paddingTop: 20,
backgroundColor: ‘#F5FCFF’,
},
});

AppRegistry.registerComponent(‘AwesomeProject’, () => AwesomeProject);

最终结果

0%