一、请求数据

1-1 原生

  1. componentDidMount() {
  2.     // ctrl+shift+j
  3.     var url = "http://192.168.14.15:5000/dj/program?rid=336355127"
  4.     fetch(url).then(res => res.json()).then(resJson => {
  5.       console.log(resJson.programs)
  6.       this.setState({
  7.         movies: resJson.programs
  8.       })
  9.     })
  10.   }

1-2 async await

  1. //支持async await
  2. async componentDidMount() {
  3.     // ctrl+shift+j
  4.     var url = "http://192.168.14.15:5000/dj/program?rid=336355127"
  5.     var data = await fetch(url);
  6.     var resJson = await data.json();
  7.     console.log(resJson)
  8.   }

二、渲染数据

2-1 渲染

  1. import {  StyleSheet, Text, View,FlatList ,Image} from 'react-native';   //导入组件
  3. export default class SectionListBasics extends Component {
  4.   state={
  5.     playlists:[]
  6.   }
  7.   render() {
  8.     return (
  9.       <View style={styles.container}>
  10.         <FlatList
  11.         data={this.state.playlists}
  12.         renderItem={({item})=><View>
  13.            <Text>{item.name}</Text>
  14.            <Image style={{width:100,height:100}}
  15.            source={{uri:item.coverImgUrl}}
  16.            />
  17.         </View>}>
  18.         </FlatList>
  19.       </View>
  20.     );
  21.   }

2-2 调试

android studio

  1. 1.ctrl+m:打开调试
  2. 2.点击Debug
  3. 3.ctrl+shift+j    //查看页面输入