react-native的网络请求用fetch，及其简单，请求到的数据保存起来，react-native用state来保存数据，类似于Java的request，还可以传递给另一个类，所以就是：请求数据，赋值。展示数据这里用ListView，有点类似于Java的HashMap，要求唯一的key，一个key代表一条数据。
定义一个方法，接收fetch的数据，并赋值给state中的dataSource：
buttonTap=()=>{
fetch( 'http://bbs.reactnative.cn/api/category/3'
).then((response)=>response.json()) .then((jsondata) =>{ const ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}); this.setState({dataSource: ds.cloneWithRows(jsondata.topics)}); this.setState({title:jsondata.description}); //alert(jsondata); }) .catch((error)=>{ alert(error); console.warning(error); }); };
由于ListView会跟Swiper有滑动冲突，所以，在用ListView渲染数据时，要做个判断componentDidMount()，等ListView数据加载完，再启用Swiper：
class RecentChatsScreen extends React.Component {
// render() {
// return (
// <View style={[styles.containerSwiper]}>
// <View style={{flexDirection:'column',justifyContent:'center',flex:1,alignItems:'center'}}>
// <Text style={{color:'#fff',fontSize: 14,textAlign:'center'}}>当前尚未登录</Text>
// <Text style={{color:'#fff',textAlign:'center'}}>请点击界面登录</Text>
// </View>
// </View>
// );
// }
// 初始化模拟数据
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}); this.state = { swiperShow:false,dataSource: ds.cloneWithRows([ // 'John','Joel','James','Jimmy','Jackson','Jillian','Julie','Devin' ]) }; this.buttonTap();//初始化 } componentDidMount(){ setTimeout(()=>{ this.setState({ swiperShow:true }); },0) } buttonTap=()=>{
fetch( 'http://bbs.reactnative.cn/api/category/3'
).then((response)=>response.json()) .then((jsondata) =>{ console.log(jsondata); const ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}); this.setState({dataSource: ds.cloneWithRows(jsondata.topics)}); this.setState({title:jsondata.description}); //alert(jsondata); }) .catch((error)=>{ alert(error); console.warning(error); }); }; render() { if(this.state.swiperShow){ return( <View style={[styles.containerSwiper]}> <ListView style={{flex:8} } removeClippedSubviews={false} dataSource={this.state.dataSource} renderRow={(rowData) => <CELL title={rowData.title} detailTitle={rowData.timestampISO}></CELL>} enableEmptySections={true} /> </View> ) }else { return ( <View style={{height:100}}> </View> ); } } }
