react-native - 如何使用 ref 属性更改 react-native 元素的 css 样式

Question

我想通过 ref 属性来指定 react-native 元素并稍后更改 css 样式，

但是，我什至无法从 this.refs.[name] 方法获取元素，如下面的代码。

<Text ref='foo' onPress={this._onPressText}>
  some text
</Text>

和回调方法，

_onPressText: function() {
  console.log(this.refs.foo);  // log undefine here
}

我该怎么办？

谢谢..

Answer 1

如果你想通过它的 ref 来操作组件的样式，你可以这样实现:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textRef = React.createRef();
    this._onPressText = this._onPressText.bind(this);
  }

  _onPressText() {
    // Note: we're accessing "current" to get the DOM node
    console.log(this.textRef.current);
    
    //To change the css style of the component
    this.textRef.current.setNativeProps({
    style:{
    textDecorationLine: 'underline'
    }
    })
  }

  render() {
    // tell React that we want to associate the <text> ref
    // with the `textRef` that we created in the constructor
    return ( <
      div >
      <
      Text ref = 'foo'
      onPress = {
        this._onPressText
      } >
      some text <
      /Text> /
      div >
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

希望对你有帮助