2017年06月_blueberry_mu

07月 06月 05月 03月 02月 01月

原创 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 4428 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 7874 1

原创 ReactNative开发——滑动组件

ReactNative开发——滑动组件环境window android react-native 0.45ScrollView介绍ScrollView是一个可以滑动的组件,它内部可以是一个高度不受控制的View,但它自身必须要有个固定的高度。这里如果我们不给直接他设置高度，它的上层空间有固定高度的话也是可以的。<ScrollView> VS <FlatList>我们应该选择哪个？ScrollVie

2017-06-13 09:27:14 6508

原创 ReactNative开发——组件的生命周期

ReactNative开发——组件的生命周期使用ES6语法创建Component我查看了下网上有关React Native中组件的生命周期有关的资料，发现大多介绍的是 ReactClass.create这种方式创建的Component创建的组件，这种方式创建的组件，生命周期都是先执行和getDefaultProps和 getInitialState。而我创建Component的方式采用了ES6的写法

2017-06-06 14:23:00 2830

原创 ReactNative开发——Clipboard

ReactNative开发——ClipboardClipboard组件可以在iOS和Android的剪贴板中读写内容示例class ClipboardView extends Component { state = { textFormClipboard: '' } render() { return ( <View st

2017-06-02 17:01:25 986

原创 ReactNative开发——StatusBar

ReactNative开发——StatusBarStatusBar用来设置并动态改变设备的状态栏显示特性。基本属性 componentDidMount(){ window.setTimeout(()=>{ //获得状态栏高度； console.log('height:'+StatusBar.currentHeight)

2017-06-02 16:59:46 2778

原创 ReactNative开发——组件的引用

ReactNative开发——组件的引用定义组件的引用<TextInput ref='aReferName'...使用组件根据引用调用组件的方法this.refs.aReferName.公开函数()示例render() { return ( <View style={{flex: 1, justifyContent: 'flex-start'}}>

2017-06-02 16:58:51 925

原创 ReactNative开发——TextInput

ReactNative开发——TextInputTextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件提供了多种特性的配置，比如自动完成，自动大小写，占位文字，以及多种不同的键盘类型（如数字键盘）等等。TextInput的属性export default class Project07 extends Component { render() { retu

2017-06-02 16:58:16 526

原创 ReactNative开发——Text组件

ReactNative开发——Text组件Text组件用来显示一段字符串，在React Native开发中，所有需要显示的字符串都需要放置在Text组件或者有他派生出的TextInput组件中。Text内部的元素不在使用flexbox布局，而是采用文本布局。基本属性export default class Project07 extends Component { render() {

2017-06-02 16:57:09 690

原创 ReactNative开发——可触摸组件类型

ReactNative开发——可触摸组件类型可触摸的组件类型有：TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。TouchableHighthight本组件用于封装视图，使其可以正确响应触摸操作，当按下的时候，封住视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得

2017-06-02 16:54:32 444

原创 React Native开发——Image组件

React Native开发——Image组件Image是一个用于显示多种不同类型的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。加载图片renderImages() { return ( <View> <Image style={styles.icon} source={require('./ico

2017-06-02 16:53:44 1035

原创 ReactNative开发——View组件

ReactNative开发——View组件View组件是React Native最基本的组件，绝大部分其他React Native组件都继承了View组件的属性，包括支持View组件的样式设置，回调函数以及其他属性。View组件的颜色和边框键值 backgroudColor 用来指定组件的背景颜色，如果没指定，默认的背景颜色会是一种非常浅的灰色，只有Text,与TextInput会

2017-06-02 16:52:06 1276

原创 ReactNative开发——flexbox布局

ReactNative开发——flexbox布局flexbox（弹性盒）是W3C提出的UI设计模型规范的一种实现，有布局神器的美誉。ReactNative实现了其中的大部分功能。位置及宽高样式键键取值 position 它的取值是字符串类型，取值可以是releative（默认）或者absolute，表示当前描述的位置是相对定位还是绝对定位 top 数值类型，当positio

2017-06-02 16:37:53 498