React-Native中使用Navigatior和自定义NavigationBar

本文主要是介绍React-Native中使用Navigatior和自定义NavigationBar，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先来张效果图：

http://www.jianshu.com/p/614bca02fc60

废话不多说
Show you the Code！

源码

功能还是在原来的项目中实现的，代码可以单独剥离，自己动手丰衣足食
源码点击这里

文件路径: ListViewLoadMore/app/common/LoadingView.js

import React, { Component } from 'react';
import {View,Image,StyleSheet,Dimensions,TouchableOpacity,Modal
} from 'react-native';
const { width, height } = Dimensions.get('window')
import loadingImage from '../../assets/0.gif'
class LoadingView extends Component{constructor(props) {super(props);}_close(){console.log("onRequestClose ---- ")}render() {const { showLoading, opacity, backgroundColor } = this.propsreturn (<Modal onRequestClose={() => this._close()} visible={showLoading} transparent><View style={ [styles.loadingView, {opacity: opacity||0.3, backgroundColor: backgroundColor||'gray'}]}></View><View style={ styles.loadingImageView }><View style={ styles.loadingImage }>{this.props.loadingViewClick?<TouchableOpacity onPress={ this.props.loadingViewClick }><Image style={ styles.loadingImage } source={ loadingImage }/></TouchableOpacity>:<Image style={ styles.loadingImage } source={ loadingImage }/>}</View></View></Modal>)}
}
const styles = StyleSheet.create({loadingView: {flex: 1,height,width,position: 'absolute'},loadingImage: {width: 150,height: 100,},loadingImageView: {position: 'absolute',width,height,justifyContent: 'center',alignItems: 'center'}
})
LoadingView.propTypes = {loadingViewClick: React.PropTypes.func, //.isRequired,showLoading: React.PropTypes.bool.isRequired,opacity: React.PropTypes.number,backgroundColor: React.PropTypes.string
}export default LoadingView

备注说明：

• 代码就这么多，如果有其他方面的需求，诸如添加文案，可以自己在此基础上自定义，应该没什么难度
• 图片资源可以自己设置和修改

使用

在需要使用的地方 先引入组件

import LoadingView from '../common/LoadingView.js'

然后在render()中添加组件

render() {return (<View style={ styles.mainView }>...<LoadingView showLoading={ this.state.showLoading } /></View>)
}

• 组件的showLoading属性是必需的，显示与隐藏是通过showLoading控制的
• 组件支持自定义背景不透明度 opacity，默认0.6
• 组件支持自定义背景颜色 backgroundcolor，默认gray
• 组件支持gif图点击事件loadingViewClick（可选）

Android需要特殊处理Gif加载

在android/app/build.gradle中需要添加以下内容

dependencies {// If your app supports Android versions before Ice Cream Sandwich (API level 14)compile 'com.facebook.fresco:animated-base-support:0.11.0'// For animated GIF supportcompile 'com.facebook.fresco:animated-gif:0.11.0'// For WebP support, including animated WebPcompile 'com.facebook.fresco:animated-webp:0.11.0'compile 'com.facebook.fresco:webpsupport:0.11.0'// For WebP support, without animationscompile 'com.facebook.fresco:webpsupport:0.11.0'
}

Over

先这样，有问题留言

这篇关于React-Native中使用Navigatior和自定义NavigationBar的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---