React Native 中的 Reactjs 方法查找 DOM 节点尺寸答案

【问题标题】：Reactjs Methods in React Native to Find DOM Node DimensionsReact Native 中的 Reactjs 方法查找 DOM 节点尺寸
【发布时间】：2015-08-31 12:01:46
【问题描述】：

如何从 React Native (v0.5.0) 的组件中获取 DOM 节点？根据下面的代码 sn-p，“this.refs.abc”没有“getDOMNode()”方法。此外，“findDOMNode()”在 React 模块中不可用。（最终，我试图找出组件的 DOM 元素的尺寸）。

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} = React;


var styles = StyleSheet.create({
  button: {
    marginHorizontal: 100,
    marginVertical: 300,
    height: 50,
    padding: 5,
    backgroundColor: "yellow",
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
})
var Test = React.createClass({
  handleClick: function(e) {
    debugger;
    var element = this.refs.abc.getDOMNode();
    var element2 = React.findDOMNode(this.refs.abc);
  },

  render: function() {

    return <Abc ref="abc" update={this.handleClick.bind(this)} />
  }
});

var Abc = React.createClass({
  render: function() {
    return (
      <TouchableHighlight
        underlayColor="#A4A4A4"
        style={styles.button}
        onPress={() => this.props.update()}>
          <View>
            <Text>Testing</Text>
          </View>
      </TouchableHighlight>
    );
  }
})

AppRegistry.registerComponent('test', () => Test);

【问题讨论】：

标签： reactjs version react-native

【解决方案1】：

没有 DOM。 React Native 不在网络浏览器中运行，因此没有完全等价的。要获取组件的尺寸，您可以使用混入到组件中的measure 方法：

this.refs.abc.measure(function(x, y, width, height) {
    // Do something with position and dimensions
});

【讨论】：