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)
});
};