javascript - 无法在 React Native 中呈现 onPress TouchableOpacity View

Question

我想在按下 TouchableOpacity 时呈现一个 View ，但它不起作用。任何人都可以提出最佳解决方案吗？

import React, { Component } from 'react';
import {
    AppRegistry,
    View,
    TouchableOpacity
} from 'react-native';

export default class App extends Component {
   
    constructor(props){
        super(props);
        this._renderMyView.bind(this);
    }

    _renderMyView = () => {
      <View>
          <Text>I am here to returns camera</Text>
          <Text>I am here to returns camera</Text>
          <Text>I am here to returns camera</Text>
          <Text>I am here to returns camera</Text>
          <Text>I am here to returns camera</Text>
          <Text>I am here to returns camera</Text>
          <Text>I am here to returns camera</Text>
          <Text>I am here to returns camera</Text>
      </View>
    }

    render() {
        return (
       
                <TouchableOpacity  onPress={this._renderMyView} style={{height:50,width:50,backgroundColor:'red'}} >
                    <Text style={{height:50,width:50,backgroundColor:'red'}} >camera</Text>
                </TouchableOpacity>

        );
    }
}

Answer 1

你应该像这样返回 JSX。 也给flex 1查看

import React, { Component } from 'react';


import {
    AppRegistry,
    View,
    TouchableOpacity, Text,
} from 'react-native';

export default class App extends Component {

constructor(props){
    super(props);
    this.state = {
      visible: false,
    }
}

_renderMyView = () => {
  return (
    <View style={{height: 50, backgroundColor: '#eee',marginTop: 100}}>
        <Text>I am here to returns camera</Text>
        <Text>I am here to returns camera</Text>
        <Text>I am here to returns camera</Text>
        <Text>I am here to returns camera</Text>
        <Text>I am here to returns camera</Text>
        <Text>I am here to returns camera</Text>
        <Text>I am here to returns camera</Text>
        <Text>I am here to returns camera</Text>
    </View>
  );

}

render() {
    return (

            <View style={{flex: 1}}>
              <TouchableOpacity  onPress={()=>{this.setState({visible: true})}} style={{marginTop: 50,height:50,width:50,backgroundColor:'red'}} >
                  <Text style={{height:50,width:50,backgroundColor:'red'}} >camera</Text>
              </TouchableOpacity>

              {this.state.visible ? this._renderMyView() : null}
            </View>

    );
}