Javascript 反应本机自定义按钮中组件的条件呈现

我是一个老程序员，正在学习使用react native

我遇到了问题，因为我似乎无法有效地利用组件的条件渲染。我的目标是有条件地加载此按钮

这是一个奇怪的问题，我花了一整天的时间试图解决它，我正在应用程序的一个场景中使用renderIf技术，它工作得非常好。但是，当我在这个组件中使用它时，它会立即崩溃， 抛出一个异常

我使用了terminal命令npm install render if--save来安装程序包，该程序包非常适合场景，但不适合此组件

任何帮助都将不胜感激，任何关于替代方法的建议也将不胜感激

GeneralButton.js

“严格使用”；
从“React”导入React，{Component}；
进口{
样式表，
触控高光，
看法
文本，
尺寸，
平台，
}从“反应本机”；
从“render if”导入renderIf；
类GeneralButton扩展组件{
建造师（道具）{
超级（道具）；
此.state={
渲染：真
}
}
getWidth（）{
让宽度，百分比；
如果（this.props.percent==true）{
让screenWidth=Dimensions.get（'window'）.width；
宽度=（屏幕宽度/100）*this.props.width；
返回宽度；
}否则{
百分比=假；
宽度=this.props.width！=null？this.props.width:300；
返回宽度；
}
}
render（）{
返回(
{renderIf（this.state.render）(
{this.props.text}
)}
);
}
}
const styles=StyleSheet.create({
按钮：{
身高：44，
边框颜色：“rgba（255，255，255，0.8）”，
borderWidth:StyleSheet.hairlineWidth，
paddingTop:5，
填充底部：5，
paddingLeft:10，
paddingRight:10，
对齐项目：“居中”，
为内容辩护：“中心”，
},
按钮文字：{
颜色：'白色'，
…平台。选择({
ios：{
fontFamily:“OpenSans灯光”，
},
安卓：{
fontFamily:“opensanslight”，
},
})
},
});
module.exports=通用按钮；

在React中，component renders函数返回一个组件实例。将渲染内容包装在

视图中

。在您的情况下，不需要使用

renderIf

，您可以在以下情况下使用inline：

render（）{
返回(
{this.state.render&&
{this.props.text}
}
)
}

'use strict';

import React, { Component } from 'react';
import {
  StyleSheet,
  TouchableHighlight,
  View,
  Text,
  Dimensions,
  Platform,
} from 'react-native';

import renderIf from 'render-if';

class GeneralButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
      render: true
    }
  }

  getWidth(){
    let width, percent;
    if (this.props.percent == true) {
      let screenWidth = Dimensions.get('window').width;
      width = (screenWidth / 100) * this.props.width;
      return width;
    } else {
      percent = false;
      width = this.props.width != null ? this.props.width : 300;
      return width;
    }
  }

  render() {
    return (
      {renderIf(this.state.render)(
        <TouchableHighlight underlayColor='rgba(255, 255, 255, 0.2)' onPress={this.props.onPress}>
          <View style={styles.button} width={this.getWidth()}>
            <Text style={styles.buttonText}>
              {this.props.text}
            </Text>
          </View>
        </TouchableHighlight>
      )}
    );
  }
}

const styles = StyleSheet.create({
  button: {
    height: 44,
    borderColor: 'rgba(255, 255, 255, 0.8)',
    borderWidth: StyleSheet.hairlineWidth,
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 10,
    paddingRight: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
    ...Platform.select({
      ios: {
        fontFamily: 'OpenSans-Light',
      },
      android: {
        fontFamily: 'opensanslight',
      },
    })
  },
});

module.exports = GeneralButton;