Question

我是react-native框架的初学者。我正在构建一个示例移动应用程序。而且我坚持最基本的步骤。我试图在点击事件上调用“ getBusinessNews（）”函数，该函数将返回一个组件。但是由于某种原因，它没有返回。我已经仔细检查了组件的路径及其正确性。甚至显示在函数内部定义的console.log。我附上了代码，感谢所有帮助。预先谢谢你。

import React, {Component} from 'react';
import {Text,View,TouchableOpacity} from 'react-native';        
import BusinessNews from '../News/BusinessNews';
class categories extends Component{ 
   render(){
      return(
          <View>
             <TouchableOpacity onPress={this.getBusinessNews.bind(this)}>
                <Text>Business News</Text>
             </TouchableOpacity>
          </View>
       );
   }

   getBusinessNews(){ 
       console.log(1);
       return(      
         <BusinessNews />
       );
    }

   export default categories;

Answer 1

将组件从event handler/listener返回到渲染将不起作用。取而代之的是state update来决定是否渲染组件BusinessNews。

它应该这样做。

构造函数

constructor() {
  this.state = {
    showBusiness: false//initially set to false
  }
}

获取商业新闻

getBusinessNews() {
  this.setState({showBusiness: true})//set to true to show BusinessNews
}

渲染

render() {

  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={this
          .getBusinessNews
          .bind(this)}>
          {this.state.showBusiness ===true && <BusinessNews/>}//check boolean true 
          <Text>Business News</Text>
        </TouchableOpacity>
      </View>
    );
  }

}

Answer 2

您可以单击返回组件。由于您只需要在 render（）中返回组件。您需要更改逻辑以渲染组件。

您可以在<BusinessNews />中的某个地方调用render()来添加组件。

在React-Native中按下按钮不返回组件

2 个答案: