- static propTypes = {
- name:PropTypes.string,
- ID:PropTypes.number.isRequired,
- }
和
- name
两个属性,并且进行了属性的确认,其中,'isRequired' 表示如果不传递这个属性,那么开发阶段中,系统会出现警告,让我们对其进行属性确认,也就是说是否为必须属性。
- ID
- React.PropTypes.any
- React.PropTypes.array;
- React.PropTypes.func;
- React.PropTypes.bool;
- React.PropTypes.number;
- React.PropTypes.object;
- React.PropTypes.string;
- React.PropTypes.element;
- React.PropTypes.oneOf(['value1', 'value2'])
- React.PropTypes.oneOfType([
- React.PropTypes.node,
- React.PropTypes.number,
- React.PropTypes.string
- ])
- React.PropTypes.node;
- React.PropTypes.instanceOf(NameOfClass);
- React.PropTypes.arrayOf(React.PropTypes.string)
- React.PropTypes..objectOf(React.PropTypes.number)
- React.PropTypes.shape({
- color:React.PropTypes.stirng,
- fontSize:React.PropTypes.number
- })
- static defaultProps = {
- name:'苍井空'
- };
- {
- /* 左边图片 */
- } < Image source = {
- {
- uri: this.props.image === '' ? 'defaullt_thumb_83x83': this.props.image
- }
- }
- style = {
- styles.imageStyle
- }
- />
- /
之类的提示,比较好的还会使用
- 无数据
的方式告诉用户网络出现问题等等。
- 指示器
页面,等到有数据时,再重新渲染数据。
- 提示
- import React,
- {
- Component
- }
- from 'react';
- import {
- StyleSheet,
- View,
- Text,
- }
- from 'react-native';
- export
- default class GDNoDataView extends Component {
- render() {
- return ( < View style = {
- styles.container
- } > <Text style = {
- styles.textStyle
- } > 无数据 < /Text>
- </View > );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- textStyle: {
- fontSize: 21,
- color: 'gray'
- }
- });
- // 根据网络状态决定是否渲染 listview
- renderListView() {
- if (this.state.loaded === false) {
- return ( < NoDataView / >);
- } else {
- return ( < PullList onPullRelease = { (resolve) = >this.fetchData(resolve)
- }
- dataSource = {
- this.state.dataSource
- }
- renderRow = {
- this.renderRow
- }
- showsHorizontalScrollIndicator = {
- false
- }
- style = {
- styles.listViewStyle
- }
- initialListSize = {
- 5
- }
- />
- );
- }
- }
- /
- <ListView
- dataSource={this.state.dataSource}
- renderRow={this.renderRow}
- showsHorizontalScrollIndicator={false}
- style={styles.listViewStyle}
- initialListSize={5}
- renderHeader={this.renderHeader}
- />
- // 返回 listview 头部
- renderHeader() {
- return (
- <View style={styles.headerPromptStyle}>
- <Text>根据每条折扣的点击进行统计,每5分钟更新一次</Text>
- </View>
- );
- }
实现下拉刷新和上拉加载更多的功能。
- react-native-pull
- <PullList
- onPullRelease={(resolve) => this.fetchData(resolve)}
- dataSource={this.state.dataSource}
- renderRow={this.renderRow}
- showsHorizontalScrollIndicator={false}
- style={styles.listViewStyle}
- initialListSize={5}
- renderHeader={this.renderHeader}
- />
- // 网络请求
- fetchData(resolve) {
- setTimeout(() => {
- fetch('http://guangdiu.com/api/gethots.php')
- .then((response) => response.json())
- .then((responseData) => {
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(responseData.data),
- loaded:true,
- });
- if (resolve !== undefined){
- setTimeout(() => {
- resolve(); // 关闭动画
- }, 1000);
- }
- })
- .done();
- });
- }
- let formData = new FormData();
- formData.append("参数", "值");
- formData.append("参数", "值");
- fetch(url, {
- method:'POST,
- headers:{},
- body:formData,
- }).then((response)=>{
- if (response.ok) {
- return response.json();
- }
- }).then((json)=>{
- alert(JSON.stringify(json));
- }).catch.((error)=>{
- console.error(error);
- })
- import React,
- {
- Component
- }
- from 'react';
- import {
- StyleSheet,
- Text,
- View,
- TouchableOpacity,
- Image,
- ListView,
- Dimensions
- }
- from 'react-native';
- // 第三方
- import {
- PullList
- }
- from 'react-native-pull';
- const {
- width,
- height
- } = Dimensions.get('window');
- // 引用外部文件
- import CommunalNavBar from '../main/GDCommunalNavBar';
- import CommunalHotCell from '../main/GDCommunalHotCell';
- import HalfHourHot from './GDHalfHourHot';
- import Search from './GDSearch';
- export
- default class GDHome extends Component {
- // 构造
- constructor(props) {
- super(props);
- // 初始状态
- this.state = {
- dataSource: new ListView.DataSource({
- rowHasChanged: (r1, r2) = >r1 !== r2
- }),
- loaded: true,
- };
- this.fetchData = this.fetchData.bind(this);
- }
- // 网络请求
- fetchData(resolve) {
- let formData = new FormData();
- formData.append("count", "30");
- setTimeout(() = >{
- fetch('http://guangdiu.com/api/getlist.php', {
- method: 'POST',
- headers: {},
- body: formData,
- }).then((response) = >response.json()).then((responseData) = >{
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(responseData.data),
- loaded: true,
- });
- if (resolve !== undefined) {
- setTimeout(() = >{
- resolve();
- },
- 1000);
- }
- }).done();
- });
- }
- // 跳转到近半小时热门
- pushToHalfHourHot() {
- this.props.navigator.push({
- component: HalfHourHot,
- })
- }
- // 跳转到搜索
- pushToSearch() {
- this.props.navigator.push({
- component: Search,
- })
- }
- // 返回左边按钮
- renderLeftItem() {
- return ( < TouchableOpacity onPress = { () = >{
- this.pushToHalfHourHot()
- }
- } > <Image source = {
- {
- uri: 'hot_icon_20x20'
- }
- }
- style = {
- styles.navbarLeftItemStyle
- }
- />
- </TouchableOpacity > );
- }
- // 返回中间按钮
- renderTitleItem() {
- return ( < TouchableOpacity > <Image source = {
- {
- uri: 'navtitle_home_down_66x20'
- }
- }
- style = {
- styles.navbarTitleItemStyle
- }
- />
- </TouchableOpacity > );
- }
- // 返回右边按钮
- renderRightItem() {
- return ( < TouchableOpacity onPress = { () = >{
- this.pushToSearch()
- }
- } > <Image source = {
- {
- uri: 'search_icon_20x20'
- }
- }
- style = {
- styles.navbarRightItemStyle
- }
- />
- </TouchableOpacity > );
- }
- // 根据网络状态决定是否渲染 listview
- renderListView() {
- if (this.state.loaded === false) {
- return ( < NoDataView / >);
- } else {
- return ( < PullList onPullRelease = { (resolve) = >this.fetchData(resolve)
- }
- dataSource = {
- this.state.dataSource
- }
- renderRow = {
- this.renderRow
- }
- showsHorizontalScrollIndicator = {
- false
- }
- style = {
- styles.listViewStyle
- }
- initialListSize = {
- 5
- }
- renderHeader = {
- this.renderHeader
- }
- />
- );
- }
- }
- / / 返回每一行cell的样式renderRow(rowData) {
- return ( < CommunalHotCell image = {
- rowData.image
- }
- title = {
- rowData.title
- }
- />
- );
- }
- componentDidMount() {
- this.fetchData();
- }
- render() {
- return (
- <View style={styles.container}>
- {/ * 导航栏样式 * /}
- <CommunalNavBar
- leftItem = {() => this.renderLeftItem()}
- titleItem = {() => this.renderTitleItem()}
- rightItem = {() => this.renderRightItem()}
- / >
- {
- /* 根据网络状态决定是否渲染 listview */
- } {
- this.renderListView()
- } < /View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- backgroundColor: 'white',
- },
- navbarLeftItemStyle: {
- width:20,
- height:20,
- marginLeft:15,
- },
- navbarTitleItemStyle: {
- width:66,
- height:20,
- },
- navbarRightItemStyle: {
- width:20,
- height:20,
- marginRight:15,
- },
- listViewStyle: {
- width:width,
- },
- });
- /
效果:
内叫 模态跳转,特性就是当页面退出后会直接销毁,多用于注册、登录等不需要常驻内存的界面。
- iOS
的时候,在'configsSence' 中进行操作;具体操作如下:
- Navigator
- // 设置跳转动画
- configureScene={(route) => this.setNavAnimationType(route)}
- // 设置Navigator跳转动画
- setNavAnimationType(route) {
- if (route.animationType) { // 有值
- return route.animationType;
- }else {
- return Navigator.SceneConfigs.PushFromRight;
- }
- }
- // 跳转到近半小时热门
- pushToHalfHourHot() {
- this.props.navigator.push({
- component: HalfHourHot,
- animationType:Navigator.SceneConfigs.FloatFromBottom
- })
- }
ListView
- 作为跳转动画,但是当我们下拉的时候,动画中默认附带的 **返回手势** 会干扰我们
Navigator
- 的滑动手势,这个怎么解决呢?其实很简单,我们只要关闭
null` ,这样它就不知道需要响应手势事件了,方法如下:
- 手势就可以了嘛,怎么关闭呢?其实在源码中我们可以找到,手势包含在动画中,我们如果不需要,只需要给其赋值为
- // 设置Navigator跳转动画
- setNavAnimationType(route) {
- if (route.animationType) { // 有值
- let conf = route.animationType;
- conf.gestures = null; // 关闭返回手势
- return conf;
- }else {
- return Navigator.SceneConfigs.PushFromRight;
- }
- }
手势功能。
- Navigator
、
- onEndReached
、
- onEndReachedThreshold
使用
- renderFooter
- loadMore() {
- // 数据加载操作
- }
- renderFooter() {
- return ( < View style = {
- {
- height: 100
- }
- } > <ActivityIndicator / ></View>
- );
- }
- / / 根据网络状态决定是否渲染listview renderListView() {
- if (this.state.loaded === false) {
- return ( < NoDataView / >);
- } else {
- return ( < PullList onPullRelease = { (resolve) = >this.fetchData(resolve)
- }
- dataSource = {
- this.state.dataSource
- }
- renderRow = {
- this.renderRow
- }
- showsHorizontalScrollIndicator = {
- false
- }
- style = {
- styles.listViewStyle
- }
- initialListSize = {
- 5
- }
- renderHeader = {
- this.renderHeader
- }
- onEndReached = {
- this.loadMore
- }
- onEndReachedThreshold = {
- 60
- }
- renderFooter = {
- this.renderFooter
- }
- />
- );
- }
- }
- /
和
- GET
请求方式进行一层基础封装,也就是要把它们单独独立出来,那么这边先来看下 GET 这边:
- POST
- var HTTPBase = {};
- /**
- *
- * GET请求
- *
- * @param url
- * @param params {}包装
- * @param headers
- *
- * @return {Promise}
- *
- * */
- HTTPBase.get = function (url, params, headers) {
- if (params) {
- let paramsArray = [];
- // 获取 params 内所有的 key
- let paramsKeyArray = Object.keys(params);
- // 通过 forEach 方法拿到数组中每个元素,将元素与参数的值进行拼接处理,并且放入 paramsArray 中
- paramsKeyArray.forEach(key => paramsArray.push(key + '=' + params[key]));
- // 网址拼接
- if (url.search(/\?/) === -1) {
- url += '?' + paramsArray.join('&');
- }else {
- url += paramsArray.join('&');
- }
- }
- return new Promise(function (resolve, reject) {
- fetch(url, {
- method:'GET',
- headers:headers
- })
- .then((response) => response.json())
- .then((response) => {
- resolve(response);
- })
- .catch((error) => {
- reject({status:-1})
- })
- .done();
- })
- }
- fetchData(resolve) {
- HTTPBase.get('http://guangdiu.com/api/gethots.php')
- .then((responseData) => {
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(responseData.data),
- loaded:true,
- });
- if (resolve !== undefined){
- setTimeout(() => {
- resolve(); // 关闭动画
- }, 1000);
- }
- })
- .catch((error) => {
- })
- }
- export default HTTPBase;
- /**
- *
- * POST请求
- *
- * @param url
- * @param params {}包装
- * @param headers
- *
- * @return {Promise}
- *
- * */
- HTTPBase.post = function (url, params, headers) {
- if (params) {
- // 初始化FormData
- var formData = new FormData();
- // 获取 params 内所有的 key
- let paramsKeyArray = Object.keys(params);
- // 通过 forEach 方法拿到数组中每个元素,将元素与参数的值进行拼接处理,并且放入 paramsArray 中
- paramsKeyArray.forEach(key => formData.append(key, params[key]));
- }
- return new Promise(function (resolve, reject) {
- fetch(url, {
- method:'POST',
- headers:headers,
- body:formData,
- })
- .then((response) => response.json())
- .then((response) => {
- resolve(response);
- })
- .catch((error) => {
- reject({status:-1})
- })
- .done();
- })
- }
- export default HTTPBase;
- // 网络请求
- fetchData(resolve) {
- let params = {"count" : 5 };
- HTTPBase.post('http://guangdiu.com/api/getlist.php', params)
- .then((responseData) => {
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(responseData.data),
- loaded:true,
- });
- if (resolve !== undefined){
- setTimeout(() => {
- resolve();
- }, 1000);
- }
- })
- .catch((error) => {
- })
- }
来源: http://www.cnblogs.com/miaomiaoshen/p/6602581.html