如何在react中使用fetch调用接口 react native 怎么调用java的接口
如何在react中使用fetch调用接口
RN自带了一个非常优雅的网络操作库fetch,下面的这个例子从gankio的接口拿到了美女图片的url然后通过state 传给列表组件,列表里返回图片组件显示图片。网络数据获取方法写在componentDidMount中,这个方法是组件生命周期中需要调用的一个方法。
class AwesomeProject extends Component {// 初始化模拟数据
constructor(props) {
super(props)
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {r1 !== r2}})
this.state = {
dataSource: ds,
load:false,
text:
}
}
//耗时操作放在这里面
componentDidMount(){
this.getNet()
}
getNet(){
fetch(http://gank.io/api/search/query/listview/category/福利/count/10/page/1)//请求地址
.then((response) => response.json())//取数据
.then((responseText) => {//处理数据
//通过setState()方法重新渲染界面
this.setState({
//改变加载ListView
load: true,
//设置数据源刷新界面
dataSource: this.state.dataSource.cloneWithRows(responseText.results),
})
})
.catch((error) => {
console.warn(error)
}).done()
}
render() {
if(this.state.load){
return (
renderRow={(rowData)=>
source={{uri:rowData.url}}/>
/>
)
} else{
return(
)
}
}
}
这里使用的是fetch的一个参数的方法,参数自然就是url,默认请求方式是GET,还有两个参数的方法,第二个参数是一组请求参数。执行fetch后返回一个Promise对象,通过then继续获取数据,这里response.json表示获取json格式的数据,也可以用text获取纯文本的数据。
获取到json后接下来就是解析json,这里的json里面有一个result数组,直接拿出来作为数据源的数据传入即可。
react native 怎么调用java的接口
public class RnTest extends ReactContextBaseJavaModule {
public RnTest(ReactApplicationContext reactContext) {
super(reactContext)
}
// ReactContextBaseJavaModule要求派生类实现getName方法。这个函数用于返回一个字符串
// 这个字符串用于在JavaScript端标记这个原生模块
@Override
public String getName() {
return "ToastByAndroid"
}
// 获取应用包名
// 要导出一个方法给JavaScript使用,Java方法需要使用注解@ReactMethod
@ReactMethod
public void getPackageName() {
String name = getReactApplicationContext().getPackageName()
Toast.makeText(getReactApplicationContext(),name,Toast.LENGTH_LONG).show()
用react native怎么调用后台接口
我理解的是,reactjs是给了前端开发人员一个使用js开发原生应用的机会,提供了一套各个平台通用的语法结构api等等,使前端开发人员可以使用现有的知识进行移动平台APP的开发,是使用相同的知识进行 不同平台的开发,也就是你要为ios和android同