昨天我搭了一个壳,里面什么数据都没有
今天我要做数据请求+列表展示,当时是最简单的例子,毕竟我是个初学者
请求数据用 fetch
fetch('http://facebook.github.io/react-native/movies.json')
例子的部分代码:
// 初始化模拟数据
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(["row1"]),
title: "row1"
};
this.getdataFromApiAsync(); //请求数据方法
}
//请求数据
getdataFromApiAsync() {
return fetch('http://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
let jsondata = responseJson.movies;
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({dataSource: ds.cloneWithRows(jsondata)});
this.setState({title:jsondata.title});
})
.catch((error) => {
console.error(error);
});
}
//请求到的数据用ListView展示
render() {
return (
<View style={{flex:1,backgroundColor:'white'}}>
<ListView style={{backgroundColor:'yellow'}}
dataSource={this.state.dataSource}
renderRow={(rowData) => <CELL title={rowData.title} detailTitle={rowData.releaseYear}></CELL>}
/>
</View>
);
}
//CELL的代码
class CELL extends React.Component{
constructor(props){
super(props);
this.state = { detailTitle:'aaaa'};
}
render(){
return(
<View style={{flex:1}}>
<Text style={styles.title}>
{this.props.detailTitle}
</Text>
<View style={styles.lineStyle}>
</View>
</View>
);
}
}
//样式
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
paddingLeft: 10,
paddingRight: 10,
paddingTop: 0,
height: 68,
backgroundColor: '#d74047',
alignItems: 'center'
},
tableView: {
paddingLeft: 0,
paddingRight: 0,
paddingTop: 0,
paddingBottom:0,
},
title:{
textAlign:'center',
color:'grey',
fontWeight:'bold',
fontSize:28,
flex: 1,//自动填充
},
lineStyle:{
paddingLeft: 0,
paddingRight: 0,
backgroundColor: 'black',
height:1,
}
});
运行看看，效果如下,丑的很特别。问我为什么设计的这么丑,只是我有些点还没搞清楚,页面布局的知识还是不够,抽个时间好好整理下布局这块。明天进行点击跳转了,今天没时间了哈。。。
