Question

我是一名学习使用反应原生的老程序员。

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

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

我使用了终端命令 npm install render-if --save 来安装适用于场景但不适用于此组件的软件包。

非常感谢任何帮助，也欢迎任何关于替代方法的建议。

GeneralButton.js

'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;

Answer 1

在React中，组件渲染函数返回组件实例。将您的渲染内容包装在View中。在您的情况下，无需使用renderIf，您可以使用内联if：

render() {
  return (
    <View>
      {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>
      }
    </View>
  )
}

在反应原生自定义按钮

1 个答案: