ReactNative开发
介绍ReactNative中组件的使用
blueberry_mu
不积跬步,无以至千里。不积小流,无以成江海。
展开
-
ReactNative开发——封装原生UI组件
ReactNative开发——封装原生UI组件下文我们将制作一个可以用来显示图片的原生UI组件,这个UI组件可以随着手势放大缩小。(封装PhotoView) PhotoView的开源地址:https://github.com/chrisbanes/PhotoView一、引入开源库可以PhotoView开源库作者的引用提示: 1.在 android项目根目录中的 build.gradle中加入:a原创 2017-06-21 12:45:37 · 4466 阅读 · 2 评论 -
ReactNative开发——Navigation的使用
ReactNative开发——Navigation的使用React Native 0.43之前 ‘react-native’包里面,但0.43之后了’rea移除了rect-native’。网上的大部分资料,也是ReactNative 0.43之前的 Navigator的用法,然而我用的0.44版本在开发,这就…. 参考: http://facebook.github.io/react-native原创 2017-06-16 10:52:00 · 7974 阅读 · 1 评论 -
ReactNative开发——滑动组件
ReactNative开发——滑动组件环境window android react-native 0.45ScrollView介绍ScrollView是一个可以滑动的组件,它内部可以是一个高度不受控制的View,但它自身必须要有个固定的高度。这里如果我们不给直接他设置高度,它的上层空间有固定高度的话也是可以的。<ScrollView> VS <FlatList>我们应该选择哪个?ScrollVie原创 2017-06-13 09:27:14 · 6576 阅读 · 0 评论 -
ReactNative开发——组件的生命周期
ReactNative开发——组件的生命周期使用ES6语法创建Component我查看了下网上有关React Native中组件的生命周期有关的资料,发现大多介绍的是 ReactClass.create这种方式创建的Component创建的组件,这种方式创建的组件,生命周期都是先执行和getDefaultProps和 getInitialState。而我创建Component的方式采用了ES6的写法原创 2017-06-06 14:23:00 · 2849 阅读 · 0 评论 -
ReactNavite开发——环境搭建
ReactNaviet开发环境搭建安装开发工具创建第一个项目使用WebStrom创建项目学习资料ReactNaviet开发——环境搭建安装开发工具我使用的操作系统是:Window 10安装git、nodejs。在命令行窗口输入 npm install -g nrm。安装nrm模块可以方便我们切换npm下载源。在命令行输入npm install -g npm@3 来安装npm 3。输原创 2017-05-27 15:31:35 · 980 阅读 · 0 评论 -
ReactNative开发——自定义组件
ReactNative开发——自定义组件定义组件我自定义了一个对话框,这个对话框的样子如图所示: 直接上代码:/** * 直接导出组件,不用写module.exports=ConfirmDialog */export default class ConfirmDialog extends Component { render() { return (原创 2017-05-27 15:36:27 · 9949 阅读 · 0 评论 -
ReactNative开发——系统弹出框
ReactNative开发——系统弹出框导入Alter组件import {Alert} from 'react-native'使用AlertAlert.alert( "弹出框标题提示语", "弹出框正文提示语", [ {text: 'ask me later'}, {text: '取消', onPress: this.userCanceled}原创 2017-05-27 15:37:41 · 2719 阅读 · 0 评论 -
ReactNative开发——RN与android Native交互初探
ReactNative开发——RN与android Native交互初探环境window10,reactnative 0.44版RN调用android方法1、导入NativeModules组件 import {NativeModules} from 'react-native';2、在android中创建一个类继承自ReactContextBaseJavaModule,并定义一个方法供RN调用。原创 2017-05-27 15:38:44 · 12996 阅读 · 7 评论 -
ReactNative开发——flexbox布局
ReactNative开发——flexbox布局flexbox(弹性盒)是W3C提出的UI设计模型规范的一种实现,有布局神器的美誉。ReactNative实现了其中的大部分功能。位置及宽高样式键 键 取值 position 它的取值是字符串类型,取值可以是releative(默认)或者absolute,表示当前描述的位置是相对定位还是绝对定位 top 数值类型,当positio原创 2017-06-02 16:37:53 · 511 阅读 · 0 评论 -
ReactNative开发——View组件
ReactNative开发——View组件View组件是React Native最基本的组件,绝大部分其他React Native组件都继承了View组件的属性,包括支持View组件的样式设置,回调函数以及其他属性。View组件的颜色和边框 键 值 backgroudColor 用来指定组件的背景颜色,如果没指定,默认的背景颜色会是一种非常浅的灰色,只有Text,与TextInput会原创 2017-06-02 16:52:06 · 1327 阅读 · 0 评论 -
React Native开发——Image组件
React Native开发——Image组件Image是一个用于显示多种不同类型的React组件,包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片(如相册)等。加载图片renderImages() { return ( <View> <Image style={styles.icon} source={require('./ico原创 2017-06-02 16:53:44 · 1050 阅读 · 0 评论 -
ReactNative开发——可触摸组件类型
ReactNative开发——可触摸组件类型可触摸的组件类型有:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。TouchableHighthight本组件用于封装视图,使其可以正确响应触摸操作,当按下的时候,封住视图的不透明度会降低,同时会有一个底层的颜色透过而被用户看到,使得原创 2017-06-02 16:54:32 · 463 阅读 · 0 评论 -
ReactNative开发——Text组件
ReactNative开发——Text组件Text组件用来显示一段字符串,在React Native开发中,所有需要显示的字符串都需要放置在Text组件或者有他派生出的TextInput组件中。Text内部的元素不在使用flexbox布局,而是采用文本布局。基本属性export default class Project07 extends Component { render() {原创 2017-06-02 16:57:09 · 733 阅读 · 0 评论 -
ReactNative开发——TextInput
ReactNative开发——TextInputTextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件提供了多种特性的配置,比如自动完成,自动大小写,占位文字,以及多种不同的键盘类型(如数字键盘)等等。TextInput的属性export default class Project07 extends Component { render() { retu原创 2017-06-02 16:58:16 · 541 阅读 · 0 评论 -
ReactNative开发——组件的引用
ReactNative开发——组件的引用定义组件的引用<TextInput ref='aReferName'...使用组件根据引用调用组件的方法this.refs.aReferName.公开函数()示例render() { return ( <View style={{flex: 1, justifyContent: 'flex-start'}}>原创 2017-06-02 16:58:51 · 937 阅读 · 0 评论 -
ReactNative开发——StatusBar
ReactNative开发——StatusBarStatusBar用来设置并动态改变设备的状态栏显示特性。基本属性 componentDidMount(){ window.setTimeout(()=>{ //获得状态栏高度; console.log('height:'+StatusBar.currentHeight)原创 2017-06-02 16:59:46 · 2797 阅读 · 0 评论 -
ReactNative开发——Clipboard
ReactNative开发——ClipboardClipboard组件可以在iOS和Android的剪贴板中读写内容示例class ClipboardView extends Component { state = { textFormClipboard: '' } render() { return ( <View st原创 2017-06-02 17:01:25 · 1009 阅读 · 0 评论