current position:Home>Reactnative foundation - 10 (fetch sends network request)

Reactnative foundation - 10 (fetch sends network request)

2022-01-27 03:23:30 The black cat made a strange mistake

App There is no cross domain problem

Network request : Default print data , The default display is cmd Command line , You can debug and view the data through the developing mode

Debug mode : defective , Will report a mistake , Some functions will be abnormal ( The input box cannot get focus 、 Error warning 、 Inaccurate timer ), Shut down when not in use

How to open the mode in development :

        1、 stay cmd Server side knock d

        2、 On the simulator client , You can see the pop-up menu

        3、 choice debug

Closing mode of development mode : ditto

ScrollView: rolling , The displayed data can be scrolled ,View Only one screen can be displayed

fetch send out get Network request :

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 send out post  Network request :

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

         Parameters 1:url

         Parameters 2:method Method 、header Header information 、 Spliced post parameter information

// Verify login 
_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)
      });
 };

copyright notice
author[The black cat made a strange mistake],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270323285957.html

Random recommended