IOS React-native工程-请求网络数据显示并可进入二
2016-08-24 本文已影响512人
Codepgq
1、创建一个工程
打开终端 cd 到你想创建项目的目录，然后执行
react-native init DownloadDataShowListView
出现这个就安装完了
这个时候进入文件目录中会看见：
工程简介
2、打开index.ios.js
- 导入模块
import {
...
这里是导入的模块，必须先导入才能使用：比如要是使用Text，必须在这里先导入
} from 'react-native';
- 布局样式：
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
这里可以定义多个布局样式：样式名：{样式设置},
如果定义多个样式，要用“ ，”分隔
});
- 视图组件
class DownloadDataShowListView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}，
在return中不能返回多个View，但是可以在View中添加多个子视图
-
在不修改任何代码的情况下运行：效果如下
运行效果
3、添加导航栏
在React Native中，导航栏有两种
- Navigator，大部分的情况下使用这个，由facebook的react native团队进行开发，一直在维护，同时支持iOS和安卓，由于在导航切换的时候需要进行大量的加载，所以会占用JS线程较多时间。
- NavigatorIOS，很少使用，由开源社区开发,有很多bug，仅仅支持iOS。但是内部由原生的UINavigationController实现，所以实际运行的时候，和原生的iOS导航一样，有一样的动画
为了和本来导航栏动画效果一致，所以使用NavigationIOS
之前又说到：要想使用必须先导入，所以要想使用NavigationIOS，必须现在import 中引入
NavigationIOS,
此时需要重写下面代码
class DownloadDataShowListView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
替换为：
var DownloadDataShowListView = React.createClass({
render: function() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: '主页',
component: RootView,
}}
/>
);
}
});
解析一下这些代码的含义：
1.定义一个变量：DownloadDataShowListView，并初始化
2.返回一个导航栏：并设置样式，标题，和显示界面
在上面代码中compoent：为RootView，可是我们还没有声明，所以还需要写上：
var RootView = React.createClass({
render(){
return (
<Image source={require('./img/background.png')} style={styles.backgroundImg}>
<Text style={styles.whiteText}>纸巾艺术</Text>
</Image>
);
}
});
1.声明一个RootView变量
2.返回一个图片，在图片中添加文字
编辑完成后，save一次，在模拟器上按下command+R刷新：（如果看不到图片重新启动一次工程），便可看到下面效果：
显示效果
4、下载网络数据
使用Fetch进行请求，关于Fetch文档
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
调用网络请求，参数1：路径 参数2：一些设置
method：请求方式
headers：请求头
body：请求体
网络是一个异步请求，所以，他返回的是一个Promise对象，这个对象有两种处理方式：
- 同步 then/catch
- 异步 async/awiat
在结束最初渲染后(生命周期),加载数据。
componentDidMount() { this.downloadData(); }
把请求数据封装成为一个方法
dwonloadData(){
fetch(URL)
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
})
.done();
},
1、URL 是一个全局变量
var URL = 'https://raw.githubusercontent.com/LeoMobileDeveloper/React-Native-Files/master/person.json';
2、then 同步
3、.done()完成
输出结果如下
[ { nickname: 'Leo', realname: 'WenchenHuang' },
{ nickname: 'Jack', realname: 'SomethingElse' } ]
5、显示到ListView中
要显示到ListView中我们要把从网络下载回来的数据保存起来
getInitialState:function(){
return{
loaded:false,
users:new ListView.DataSource({
rowHasChanged:(row1,row2) => row1 !== row2,
}),
};
},
line 1.系统函数 会自动调用一次
line 3.设置一个属性 类型boolean 值false
line 4.设置一个属性作为ListView的数据源
line 5.判断两个值相不相等
然后修改downloadData方法：
dwonloadData(){
fetch(URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
users:this.state.users.cloneWithRows(responseData),
loaded:true,
});
})
.done();
},
line 1.函数名
line 2.网络请求
line 3.转成JSON数据格式
line 4-9.得到数据把、数据存好
line 10.完成
this.setState会触发render重新调用，进行重绘
.
.
有了数据源自然要创建ListView
LlistView需要的东西：
- dataSource，一个简单数组来描述MVC中的model,类似于iOS中的dataSource
- renderRow，返回一个视图组建.类似于iOS中的cellForRowAtIndexPath
- renderSeparator,一般也需要这个方法，来说生成一个分隔线
这个时候我们进行判断
创建一个ListView
renderListView(){
return(
<Image source={require('./img/background.png')} style={styles.backgroundImg}>
<ListView
dataSource={this.state.users}
renderRow={this.renderRow}
style={styles.fullList}
renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
/>
</Image>
);
},
line 1.函数名
line 3.加载一个背景图片
line 4.在图片上加载一个ListView
.
我们知道下载网络数据需要时间，所以我们在添加一个loadingView
.
.
创建一个loadingView
renderLoadingView(){
return(
<Image source={require('./img/background.png')} style={styles.backgroundLoading}>
<ActivityIndicatorIOS
style={{alignItems:'center',justifyContent:'center',height:50}}
size= "large"
color= "red"
/>
</Image>
);
},
line 1.函数名
line 3. 加载一个背景图片
line 4. 在图片上添加一个loading动画控件
.
.
现在我们只需要在render方法中判断有没有下载完数据，分别显示就好
render(){
if (!this.state.loaded) {
return this.renderLoadingView()
}else{
return this.renderListView()
}
},
line 1.渲染
line 2.对加载完成进行判断
line 3.加载中
line 4.否则
line 5.加载完成
.
.
在上面的代码中，我们ListView的row是这样子设置的：
renderRow={this.renderRow}
所以我们要去实现这个方法
renderRow(user){
return (
<TouchableHighlight
onPress={() => this.rowClicked(user)}
underlayColor = '#ddd'>
<View style={styles.rightCongtainer}>
<Text style={styles.whiteText}>{user.nickname}</Text>
<Text style={styles.whiteText}>{user.realname}</Text>
</View>
</TouchableHighlight>
);
},
line 1.函数名
line 3.一个点击事件
line 4.设置了点击事件的方法，带参数
line 5.按下时的颜色
line 6.创建一个View座位TouchableHighlight的子视图
line 7.创建一个View的子视图Text，显示数据
line 8.创建一个View的子视图Text，显示数据
...后面的就没啥了
6、导航到第二个页面
- 你得有第二个页面是不是！！！
创建第二个页面：
//添加一个二级页面
var SecondPage = React.createClass({
render(){
return(
<View style={styles.container}>
<Text style={styles.blackText}>{this.props.user.nickname}</Text>
<Text style={styles.blackText}>{this.props.user.realname}</Text>
</View>
);
}
});
line 1.定义一个变量，二级页面
line 2.渲染
line 3.返回
line 4.创建一个View
line 5.在View上添加一个子视图Text
line 6.在View上添加一个子视图Text
- 有了第二个页面，现在就差导航过去
修改rowClicked方法
rowClicked(user){
console.log(user);
this.props.navigator.push({
title:"我是第二个页面",
component:SecondPage,
passProps:{user:user},
})
},
line 1.函数名
line 2.打印user信息
line 3.调用NavigationIOS的push方法
line 4.title：第二个页面的标题 等于self.title
line 5.component：到哪里去
line 6.passProps：传参数
最后一句话：
