[英]Conditional rendering of components in a react-native custom button
I am an old programmer learning to use react-native. 我是一个学习使用react-native的老程序员。
I'm having trouble as I seem unable to effectively utilise conditional rendering of components. 我遇到了麻烦,因为我似乎无法有效地利用组件的条件渲染。 My goal here is to load this button conditionally.
我的目标是有条件地加载此按钮。
This is a strange problem and I have spent the entire day trying to solve it, I am using the renderIf technique in one of the application's scenes and it is working perfectly . 这是一个奇怪的问题,我花了整整一天试图解决它,我在应用程序的一个场景中使用renderIf技术, 它工作得很好 。 However, when I use it in this component it immediately crashes, throwing an NSException.
但是,当我在这个组件中使用它时,它会立即崩溃,抛出一个NSException。
I have used the terminal command npm install render-if --save to install the package which worked perfectly for the scene but not for this component. 我使用了终端命令npm install render-if --save来安装适用于场景但不适用于该组件的软件包。
Any help would be hugely appreciated and any suggestions on alternative methods would also be appreciated. 任何帮助将非常感激,任何有关替代方法的建议也将受到赞赏。
GeneralButton.js 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;
In React, component renders function returns a component instance. 在React中,组件渲染函数返回组件实例。 Wrap your render content in
View
. 在
View
包装渲染内容。 In your case there is no need to use renderIf
, you can use inline if: 在您的情况下,不需要使用
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>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.