native react 获取控件内容_react-native 根据ref获取控件的内内容 - CSDN
精华内容
参与话题
  • react native 获取控件本身的高度

    千次阅读 2017-08-08 16:40:41
    react native 获取控件本身的高度  onLayout={(e) => this.rowlayouts= e.nativeEvent.layout} /> this.rowlayouts.height //拿到当前控件的高度 //准备工作好了,下节讲仿微信朋友圈自动定位的...

    react native 获取控件本身的高度

    <TouchableOpacity
           onLayout={(e) => this.rowlayouts= e.nativeEvent.layout}

    />


    this.rowlayouts.height   //拿到当前控件的高度


    //准备工作好了,下节讲仿微信朋友圈自动定位的实现



    展开全文
  • React Native控件之Text组件介绍

    千次阅读 2016-06-20 13:03:06
    React Native控件之Text组件介绍(一)前言前面在讲解View视图的时候,我们使用过Text组件,这篇文章详细的来介绍一下Text组件。(二)基本用法Text组件是React中的一个基本组件,这个和iOS上的UILabel与Android上的...

    React Native控件之Text组件介绍

    (一)前言

    前面在讲解View视图的时候,我们使用过Text组件,这篇文章详细的来介绍一下Text组件。

    (二)基本用法

    Text组件是React中的一个基本组件,这个和iOS上的UILabel与Android上的TextView组件相类似,就是用来显示文本的,这个空间除了基本的显示布局之外,可以嵌套使用,设置样式,添加事件处理功能。下面我们给出一个简答的例子:

    'use strict'
    import React, { Component } from 'react';
    import  {
       AppRegistry,
       StyleSheet,
       Text,
       View
    } from 'react-native'
    var PerfectProject = React.createClass({
        render: function(){
           return (
               <Text style={styles.outerText}>I am learning React Native!
                  <Text style={styles.innerText}>Please study hard!
                  </Text>
               </Text>
           );
        },
    });
    var styles = StyleSheet.create({
      outerText:{
        margin:40,
        textAlign:'center',
        color:'red',
        fontSize:28,
        fontFamily:'Cochin'
      },
      innerText: {
        color:'green',
        fontWeight:'bold',
      },
    });
    AppRegistry.registerComponent('PerfectProject',() => PerfectProject);

    上面是Text组件中嵌套另一个Text组件,用StyleSheet方法定义它们的演示。
    运行效果如下:
    这里写图片描述

    【注意】这一点我们需要特别注意,如果内部Text组件没有定义自己的样式,那么内部Text组件会继承外部组件的样式,哪一项自己没有定义,就要继承哪一项。

    上面我们使用了margin、textAlign、color、fontSize、fontFamily、fontWeight样式,接下来,我们总结一些Text组件的属性方法。

    (三)属性方法

    名称 类型 属性还是方法 作用 平台
    allowFontScaling bool 属性 控制字体文本是否根据iOS的设置进行自动缩放 iOS平台,Android平台不适用
    numberOfLines number 属性 设置Text显示文本的行数,如果显示的内容超过了行数,默认其他多余的信息就不会显示了。 全平台
    onLayout function 方法 当布局发生变动时自动触发该方法,其中function的参数如下:{nativeEvent: {layout: {x, y, width, height}}} 全平台
    onLongPress function 方法 当Text视图被长按的时候,该方法被调用 全平台
    onPress function 方法 该方法当文本被点击的时候调用这个方法 全平台

    在这里我只是举出一些比较常用的属性方法,只是起到抛砖引玉的作用,如果要了解更多的知识可以查看官方网址。

    (四)风格样式——Style标签

    Text组件可以使用View组件所有的Style,View组件的所有Style可以查看官方文档View的Style汇总

    名称 作用 Value
    color 字体颜色 值的形式有多种,color
    fontFamily 字体名称 自行查看相关字体
    fontSize 字体大小 值为 数字
    fontStyle 字体风格 enum(‘normal’,’italic’)
    fontWeight 字体粗细权重 enum(‘normal’,’bold’,’100’,’200’,’300’,’400’,’500’,’600’,’700’,’800’,’900’),指定字体粗细,normal和bold适用于大多数字体,不是所有的字体的值都能用数字值,在这种情况下,最接近的值被选择。
    lineHeight 行高 数字(number)
    textAlign 文本对齐方法 enum(‘auto’,’left’,’right’,’center’,’justify’) 指定文本对齐方式,‘justify’值只支持iOS,在Android上会自动回退到left。
    textDecorationLine 横线位置 enum(‘none’, ‘underline’, ‘line-through’, ‘underline line-through’)
    textShadowColor 阴影效果颜色 值的形式有多种,color
    textShadowOffset 设置阴影效果 {width:number,height:number}
    textShadowRadius 阴影效果圆角 数字(number)
    textAlignVertical 文本垂直对齐方式 enum(‘auto’,’top’,’bottom’,’center’) 不支持iOS,只支持Android
    letterSpacing 字符间距 数字(number)只支持iOS,不支持Android
    textDecorationColor 值的形式有多种,color只支持iOS,不支持Android
    textDecorationStyle 横线的风格 enum(‘solid’,’double’,’dotted’,’dashed’)只支持iOS,不支持Android
    writingDirection 文本方向 enum(‘auto’,’ltr’,’rtl’)只支持iOS,不支持Android

    (五)特别注意几点

    5.1 嵌套特点

    和web上面一致的设计方式,我们通过嵌套包裹的方案,相同的属性的文本可以用父标签进行包裹,然后内部特殊属性的文本采用子标签方案,具体可以看以下例子:

    var PerfectProject = React.createClass({
        render: function(){
           return (
               <Text style={styles.outerText}>I am learning
                  <Text style={styles.innerText}>  React Native! Please study hard!
                  </Text>
               </Text>
           );
        },
    });
    var styles = StyleSheet.create({
      outerText:{
        margin:40,
        textAlign:'center',
        color:'red',
        fontSize:28,
        fontFamily:'Cochin'
      },
      innerText: {
        color:'green',
        fontSize:40,
        fontWeight:'bold',
      },
    });

    具体运行效果:
    这里写图片描述
    可以看到内部的Text组件字体大小变为40,颜色变为绿色,字体变粗。

    5.2 Text组件容器布局规则

    之前我们介绍过View组件,该组件是支持FlexBox(弹性布局),但是Text组件直接是文本布局,也就是收一个Text接着Text,横向的布局,如果文本已经到了末尾了,那就直接换行。
    我们来看一下两种代码的对比:

       <Text>
               <Text style={styles.outerText}>I am learning</Text>
               <Text style={styles.innerText}>  React Native! Please study hard!</Text>
             </Text>

    运行截图如下:
    这里写图片描述

    可以看出两个Text直接横向排布,第二个Text直接接在第一个Text后面。但是如果该父控件采用View,View是直接支持FlexBox布局,默认内部的分布是垂直分布,具体看代码:

    var PerfectProject = React.createClass({
        render: function(){
           return (
             <View>
               <Text style={styles.outerText}>I am learning</Text>
               <Text style={styles.innerText}>  React Native! Please study hard!</Text>
             </View>
           );
        },
    });
    var styles = StyleSheet.create({
      outerText:{
        padding:20,
        color:'red',
        fontSize:28,
        fontFamily:'Cochin'
      },
      innerText: {
        color:'green',
        fontSize:28,
        fontWeight:'bold',
      },
    });

    运行结果如下所示:
    这里写图片描述

    5.3样式继承规则

    组件可以嵌套,而且样式还支持继承,也就说父组件定义了相关样式,如果子组件没有重写样式的话,那么该子组件会继承父组件定义的样式。

    5.4筑巢Text(Nested Text)

    iOS与Android允许开发者显示富文本通过注解需要指定粗细、色彩文本字符串范围(NSAttributedString On iOS,SpannableString on Android)。特别的,这是非常单调乏味。对于React Native,我们决定使用web范式来实现Nested Text一样的效果。

    <Text style={{fontWeight: 'bold'}}>
      I am bold
      <Text style={{color: 'red'}}>
        and red
      </Text>
    </Text>

    在渲染到屏幕之前,React Native转换上面的代码到平台性的NSAttributedString或者SpannableString,它们包含了以下信息:

    "I am bold and red"
    0-9: bold
    9-17: bold, red

    5.5筑巢View (Nested Views)(iOS平台,Android平台不适用)

    在iOS平台,你能nest Views在Text组件中,下面是一个例子:

    <Text>
      There is a blue square
      <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      in between my text.
    </Text>

    为了利用这个特性,你必须指定这个View的宽度(Width)和高度(Height)。

    (六)Text例子

    'use strict'
    import React, { Component } from 'react';
    import  {
       AppRegistry,
       StyleSheet,
       Text,
       View
    } from 'react-native'
    var PerfectProject = React.createClass({
       getInitialState: function(){
          return {fontWeight: 'bold', fontSize: 20};
       },
       toggleWeight: function(){
         this.setState({fontWeight: this.state.fontWeight==='bold'?'normal':'bold'});
       },
    
       increaseSize: function(){
         this.setState({fontSize: this.state.fontSize+1});
       },
       render: function(){
        var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
           return (
             <View>
                <Text style={curStyle}>
                 Tap the controls below to change attributes.
                </Text>
    
                <Text>
                   <Text>
                      See how it will even work on
                      <Text style={curStyle}>
                         this nested text!
                      </Text>
                   </Text>
                </Text>
                <Text style={styles.toggleWeightText} onPress={this.toggleWeight}>
                       Toggle Weight!
                </Text>
                <Text style={styles.changeSizeText} onPress={this.increaseSize}>
                      Increase Size!
                </Text>
             </View>
           );
        },
    });
    var styles = StyleSheet.create({
      toggleWeightText: {
        backgroundColor: '#ffaaaa',
        marginTop: 5,
      },
      changeSizeText: {
        backgroundColor: '#aaaaff',
        marginTop: 5,
      },
    });
    AppRegistry.registerComponent('PerfectProject',() => PerfectProject);

    上面是一个简单的例子,运行效果如下图所示:
    这里写图片描述

    (七)总结

    上面讲了Text组件,总结了Text属性方法,其实在实际开发过程中,才能真正体会到Text的用法,如果有不清楚的的地方可以查看官方文档。

    展开全文
  • (一)前言 现在几讲我们对于React Native一些基础做了相关讲解(例如:环境搭建,开发IDE,调试以及升级降级等),今天开始正式进入UI相关组件学习的阶段了。首先我们来讲一个非常基础的组件View。 刚创建的React Native...

    转载请标明出处:

    http://blog.csdn.net/developer_jiangqq/article/details/50540718

    本文出自:【江清清的博客】


    ()前言

           【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 

           现在几讲我们对于React Native一些基础做了相关讲解(例如:环境搭建,开发IDE,调试以及升级降级等),今天开始正式进入UI相关组件学习的阶段了。首先我们来讲一个非常基础的组件View。

             刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758),请不要重复加群!欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

    ()View组件介绍

             View作为创建UI时候的最基础,最常用的组件。这边的View组件是支持FlexBox布局(对于FlexBox布局的详细使用讲解,请点击),CSS样式以及相关触摸处理的容器组件。该组件我们可以嵌套在其他视图View里边,并且可以包含很多种类型的子视图。在Web,Android,iOS 三种平台上面该View视图可以对应平台中的三种原生视图,其中iOS对于UIView

    ,Web端对应<div>标签,Android对于android.view。下面我们来看一个比较简单的实例:

    'use strict';
    var React = require('react-native');
    var {
      AppRegistry,
      View,
    } = React;
    var TestText = React.createClass({
      render: function() {
        return (
          <View style={{flexDirection:'row',padding:20,height:100}}>
            <View style={{backgroundColor:'red',flex:1}}>
            </View>
          </View>
        );
      }
    });

    上述例子,我们这般首先创建了一个View,该View高度为100 ,但是该View的padding为20,所以整体效果如下:


    如果把padding修改成margin:20的话,那么是效果如下:


    这个相信做过CSS ,原生布局开发的话,大家应该都能看得懂的。

           其实React Native开发,View设计的时候,也支持我们采用StyleSheet来进行书写控件的的布局,这样的话,我们的代码会更加的清晰以及便于维护了。其实React Native开发也更加推荐这种方式,下面我们采用StyleSheet来实现一下:

    'use strict';
    var React = require('react-native');
    var {
      AppRegistry,
      View,
      StyleSheet,
    } = React;
    
    var TestText = React.createClass({
      render: function() {
        return (
          <View style={styles.first_view}>
            <View style={styles.second_view}>
            </View>
          </View>
        );
      }
    });
    var styles = StyleSheet.create({
      first_view:{
        flexDirection:'row',
        height:100,
        padding:20
      },
      second_view: {
        backgroundColor:'red',
        flex:1
      },
    });
    AppRegistry.registerComponent('TestText', () => TestText);

    以上的代码我们发现使用StyleSheet,进行创建相关styles,然后赋值给styles对象,在控件中直接styles对象进行使用即可。还是比较OK的。

    ()View属性方法介绍

      View属性方法介绍如下:

    序号

    名称

    属性Or方法

    类型

    说明

    1

    accessibilityLabel

    属性

    string

     

    2

    accessible

    属性

    bool

    当为trues时,表示该元素是可以进行访问,默认情况下

    所有可触摸的元素控件都是可以访问的

    3

    onAccessibilityTap

    方法

    function

    该党accessibletrue的时候并且用户对控件View做了一个Tap(轻轻的触摸或者点击)的手势

    4

    onLayout

    方法

    function

    当组件的布局发生变动的时候,会自动调用下面的方法:

    {nativeEvent: { layout: {x, y, width, height}}}。该事件当重新计算布局的时候会立即进行触发,不过界面可能不会立即刷新,特别当布局动画正在加载中的时候。

    5

    onMagicTap

    方法

    function

    accessibletrue的时候,当用户双指点击(Magic Tap)的时候,进行触发

    其他的一些方法如下(下面很多是关于事件响应者链的,基本都是比较简单的,就不着重讲解的,有兴趣大家都可以去测试一下):

    onMoveShouldSetResponder,onMoveShouldSetResponderCapture,onPresponderGrant,onResponderMove,onResponderReject,onResponderRelease,onResponderTerminate,onResponderTerminationRequest,onStartShouldSetResponder,onStartShouldSetResponderCapture,pointerEvents enum('box-none', 'none', 'box-only', 'auto')(触摸事件是否可以进行穿透控件View);

    removeClippedSubviews:该控件由于进行优化性能,尤其在一些滑动控件上面。该属性生效的要求如下:首先子视图的内容非常多,已经超过父容器,并且子视图和付容器视图都有overflow:hidden风格样式。

    【注】关于上面一些方法的具体使用,后面在讲到事件响应者的时候会进行着重讲解。

    ()View风格Style介绍

             React Native中的Style风格布局,其实和CSS样式有很多相似的地方,这边介绍一下:

    Style标签

    说明

     Style标签

    说明

    FlexBox

    弹性布局(详细点击了解)

    transforms

    动画属性(详细点击了解)

    backfaceVisibility

    enum('visible', 'hidden')定义界面翻转的

    时候是否可见

    backgroundColor

    背景颜色

    borderColor

    边跨颜色,这边几个就是代表上下左右变宽的颜色

    borderTopColor,borderRightColor

    ,borderBottomColor,borderLeftColor

    borderRadius

    边框圆角大小,其他几个是上下左右边框的圆角.borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius,

    borderBottomRightRadius

    borderStyle

    边框线的风格,这个和CSS样式一样的

    ,enum('solid', 'dotted', 'dashed')

    borderWidth

    边框宽度,另外四个是上下左右的边框宽度:borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth

    opacity

    设置透明度

    overflow

    设置内容超过容器显示还是隐藏

    elevation

    高度,设置Z轴,可以产生立体效果

     

     

    下面是几个特殊的属性,这边直接介绍所有平台通用以及只在Android平台有效果的属性

    .testID  (全平台)

         可以根据该testID在测试的时候定位该View

    :accessibilityComponentType(android平台)

         定义是否该UI组件和原生组件一致化处理

    .accessibilityLiveRegion  enum('none','polite','assertive') (android平台)

        该当View发生更新时候的,是否需要通过用户,不过该只对Android4.4以及以上的平台设备有效果

    .collapsable (android平台)

        布局合并优化使用

    .importantForAccessibility enum('auto','yes', 'no', 'no-hide-descendants') (android平台)

        设置视图响应事件等级

    .needsOffscreenAlphaCompositing (android平台)

         设置View是否需要渲染和半透明度效果处理的先后次序。

    .renderToHardwareTextureAndroid (android)

       设置是否需要GPU进行渲染

    最后实例的官方实例为:https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js

    ()最后总结

              今天我们主要介绍了基础控件View的使用方法以及相关属性风格,大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

           尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!

           关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

         关注我的微博,可以获得更多精彩内容

          

     

    展开全文
  • React-Native 获取组件的宽度和高度

    千次阅读 2018-09-17 14:51:34
    react-native 获取组件的尺寸有两种方式 第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对于父组件的位置坐标。...

    react-native 获取组件的尺寸有两种方式

    第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对于父组件的位置坐标。如果我们需要随时都可以去获取组件的尺寸或者相对于屏幕的位置坐标时,这种方式并不适合。

    那么这里我们就来看下第二种方式,使用react-native中的findNodeHandle和UIManager来获取组件的尺寸:

    import {
        findNodeHandle,
        UIManager
    } from 'react-native';
     
    layout(ref) {
            const handle = findNodeHandle(ref);
             
            return new Promise((resolve) => {
                UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
                    resolve({
                        x,
                        y,
                        width,
                        height,
                        pageX,
                        pageY
                    });
                });
            });
     }
    

    这里我们声明了一个名叫layout的函数,当我们需要获取组件的宽度和高度或者位置信息时,就可以通过调用这个函数去获取。我们可以看到layout这个函数接受一个ref参数,这个参数表示组件的实例,传入组件的实例后,然后通过findNodeHandle方法获取组件节点。

    UIManager.measure接受两个参数,第一个参数是通过findNodeHandle获取的组件节点,第二个参数是获取成功的回调,回调有6个参数:

    x,y表示组件的相对位置,width,height表示组件的宽度和高度,pageX,pageY表示组件相对于屏幕的绝对位置。

    展开全文
  • Demo请见我的github: ... 经常使用的布局封装成一个单独的控件是很常见的需求, 基本步骤如下: 创建控件(类似于一个Screen) ...import React, {Component} from 'react' ... export default class ...
  • react native 顶部控件

    千次阅读 2017-08-02 17:03:14
    github地址:https://github.com/781238222/react-native-header-bar
  • 如何将原生控件桥接到React-Native
  • react native 获取验证码

    千次阅读 2017-08-02 17:03:46
    获取验证码控件:https://github.com/781238222/react-native-verify-code
  • react-native 获取组件的尺寸有两种方式,第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对于父组件的位置坐标。...
  • ReactNative 如何获取组件的引用

    千次阅读 2017-07-25 18:03:52
    refs相关资料见:http://reactnative.cn/post/608
  •  刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该ToolBarAndroid组件进行封装了Android
  • react native 获取 view 高度

    千次阅读 2019-08-23 15:28:42
    rn 获取view 高度 onLayout = (event) =&gt; { const viewHeight = event.nativeEvent.layout.height; } render() { return ( &lt;View onLayout={(event) =&gt; this.onLayout(event)}&gt;&...
  • 欢迎大家关注【跨平台开发那些事】公众号,定期推送跨平台...关于自定义View的内容网上已经有很多的博文,本篇博客要和大家分享如何在React Native中自定义组件实现抽屉菜单控件效果。分享功能在App中的重要性想必...
  • React Native控件之Switch与Picker组件讲解(一)前言这篇文章主要介绍两个简单的组件Switch与Picker组件,这两个组件在实际开发中也是经常用到的。接下来我们来介绍一下这两个控件。(二)Switch组件2.1 Switch组件...
  • React Native开发】React Native控件之Text组件讲解(9)

    万次阅读 多人点赞 2016-04-01 21:20:36
     刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!(二)基本介绍 该Text组件为Reac
  • (一)前言 今天我们一起来看一下WebView组件讲解以及使用实例 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩...
  • React Native之ScrollView控件详解

    万次阅读 2017-05-30 20:12:44
    概述ScrollView在Android和ios原生开发中都比较常见,是一个 滚动视图控件。在RN开发中,系统也给我们提供了这么一个控件。不过在RN开发中 ,使用ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的...
  • React Native 封装Android原生组件
  • (原) react native 获取view宽高

    千次阅读 2017-11-06 11:49:30
    onLayout = (event)=>{ console.log(event.nativeEvent.layout.height) } 页面引用 onLayout = {(event)=>this.onLayout(event)} react native 入门记录  错误请指正
  • 要想获取文本框的值,首先我们需要看一下官方文档的解释: 这里的意思是说当文本框的内容改变的时候,文本框的输入的内容就会作为一个参数进行传递。因此我们就可以获取到文本框里面的内容就好了。 1 ...
1 2 3 4 5 ... 20
收藏数 7,523
精华内容 3,009
关键字:

native react 获取控件内容