Question

嘿伙计们，请你帮我解决这个问题。我想在按下TouchableOpacity时渲染视图，但它不起作用。可以请任何建议最好的解决方案。

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

目前，您的组件在呈现视图时可以依赖于它们。它可以通过以下方式简单地解决：

将状态添加到组件，例如：state = { renderView : false }

添加条件渲染，降低你的状态：

render（）{ 回来（

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

{this.state.renderView＆amp;＆amp; this._renderMyView（）}

        );
    }

从_renderMyView()返回您的观看次数，因此只需为您的观点添加返回陈述。
按下触发时更改状态： <TouchableOpacity onPress={() => this.setState({renderView: true})} ... >

Answer 2

你应该像这样返回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>

    );
}

}

Answer 3

React的工作方式基于状态更改，因此您始终基于当前状态（或道具）进行渲染。如果需要根据某些更改进行渲染，则应首先更改状态，然后有条件地渲染到新状态：

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

export default class App extends Component {

    constructor(props){
        super(props);

        this.state = {
            renderView: false
        }

        //You had a slighty mistake here, you have to assign bind's result
        this._renderMyView = this._renderMyView.bind(this);
        this._onPress= this._onPress.bind(this);
    }

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

    _onPress() {
       //React to the event and change the state
       this.setState({renderView: true});
   }

    _renderMyView () {
        //Render based on the current state
        if(this.state.renderView) {
            return (
              <View>
                  <Text>I am here to returns camera</Text>
                  <Text>More stuff here...</Text>
              </View>
            );
        }

        return null;
    }
}

为了澄清，每次调用this.setState时，都会执行组件的循环寿命，有关更多信息，请参阅the oficial docs，更新部分。也就是说：

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

作为附加注释（为了上面的示例，它不是必需的），this.setState异步执行，这意味着如果您需要立即执行某些操作在状态被修改之后，您必须将回调作为第二个参数传递：

this.setState({someProp: 1}, () => {
    console.log('someProp: ' + this.state.someProp); //someProp: 1
});

这样做会产生意外行为：

this.setState({someProp: 1});
//You cannot ensure that the state has changed at this point, so the following line could be the expected or the previous value
console.log('someProp: ' + this.state.someProp); //someProp: ???

无法在本机中呈现onPress TouchableOpacity视图

3 个答案: