ReactNative 基础 - 10 （fetch发送网络请求）

App不存在跨域问题

网络请求：默认打印的数据，默认显示在cmd命令行中，可以通过开发中模式进行调试查看数据

调试模式：有缺陷，会报错，某些功能会异常（输入框无法获取焦点、错误警告、定时器不准确），不用的时候就关闭

开发中模式的打开方式：

        1、在cmd服务端 敲d

        2、在模拟器客户端，可以看到弹出的菜单

        3、选择debug

开发中模式的关闭方式：同上

ScrollView：滚动，可以让显示的数据滚动显示，View只能显示一屏

fetch 发送 get 网络请求：

const rpx = x => (Dimensions.get('screen').width / 750) * x;
export default class App extends Component {
  url = 'https://api.apiopen.top/getWangYiNews';
  state = {result: []};
  componentDidMount() {
    fetch(this.url)
      .then(res => res.json())
      .then(res => {
        this.setState({result: res.result});
      });
  }
  showNews() {
    return this.state.result.map((item, index) => (
      <View  key={index}>
        <Image source={{uri: item.image}}/>
        <View>
          <Text >{item.title}</Text>
          <Text>{item.passtime}</Text>
        </View>
      </View>
    ));
  }
  render() {
    return <ScrollView>{this.showNews()}</ScrollView>;
  }
}

fetch 发送 post 网络请求：

        fetch(参数1,{参数2}).then(res=>res.json()).then(res=>{console.log(res)})

        参数1：url

        参数2：method方法、header头信息、拼接的post参数信息

//验证登录
_dologin = () => {
    const {uname, upwd} = this.state;
    let url = 'http://www….';
    const body = `uname=${uname}&upwd=${upwd}`;
    fetch(url, {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body,
    })
      .then(res => res.json())
      .then(res => {
         console.log(res)
      });
 };