Question

有没有办法可以定位在JavaScript代码中本地生成的视图，类似于我在JavaScript for web中可以做的事情？即为视图提供ID，然后拨打document.getElementById？

我想要实现的是一种切换按钮（TouchableHighlight）上的视图的可见性的方法。

Answer 1

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

但是，在您的情况下，如果您要执行的操作是切换视图，则可以通过返回基于状态变量为true或false的视图来实现此目的。类似的东西：

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);

定位在JavaScript中反应原生视图

1 个答案: