以JavaScript中的反应本机视图为目标

Targeting react native views in JavaScript

本文关键字：本机 视图 目标 JavaScript      更新时间：2023-09-26

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

我试图实现的是通过点击按钮（TouchableHighlight）来切换视图的可见性。

有一种方法可以通过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}

这里设立了一个工作项目。完整代码如下。

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);
相关文章：