javascript - 在 JavaScript 中定位 React native View

Question

有没有一种方法可以像我在 JavaScript for web 中所做的那样，以 JavaScript 代码中的 React Native 创建的目标 View 为目标？即给 View 一个 ID，然后调用 document.getElementById ？

我想要实现的是一种在点击按钮 (TouchableHighlight) 时切换 View 可见性的方法。

Answer 1

有一种方法可以通过 refs 在 React Native 中定位 View 或组件。 . https://facebook.github.io/react/docs/more-about-refs.html .

但是，在您的情况下，如果您尝试做的是切换 View ，您可以通过返回基于状态变量为真或假的 View 来实现。像这样的东西:

toggleView() {
  this.setState({
      showView: !this.state.showView
  })
}

var view = <View><Text>This view is being toggled</Text></View>

<TouchableHighlight onPress={ () => this.toggleView() } >
    <Text>Toggle View</Text>
</TouchableHighlight>

{this.state.showView && view}

设置了一个工作项目 here .完整代码如下。

https://rnplay.org/apps/puK5UQ

'use strict';

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

var SampleApp = React.createClass({

  getInitialState() {
        return {
            showView: true
        }
    },

  toggleView() {
    this.setState({
        showView: !this.state.showView
    })
  },

  render: function() {

    var view = <View style={{height:100, backgroundColor: 'red'}}><Text>This view is being toggled</Text></View>

    return (
      <View style={styles.container}>
        <TouchableHighlight underlayColor="#efefef" onPress={ () => this.toggleView() } style={{marginTop:60, backgroundColor: '#ededed', height:60, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
            <Text style={{ fontSize:20 }}>Toggle View</Text>
        </TouchableHighlight>
        {this.state.showView && view}
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,

  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);