React native 如何为react本机组件(如“视图”或任何其他组件)指定两个类?
我是react native的新手,希望在单个组件中添加两个类,比如View或TouchableOpacity。我有一个按钮,当用户按下它时,它会变为红色或绿色…假设脱机和buttonSelected属性处于组件状态,类似的功能应该可以工作 一般的想法是有条件地为on/offline和button unselected/selected选择正确的类。然后将这些类放入样式数组中。有几种方法可以满足您的需求,本例只是其中一种方法React native 如何为react本机组件(如“视图”或任何其他组件)指定两个类?,react-native,React Native,我是react native的新手,希望在单个组件中添加两个类,比如View或TouchableOpacity。我有一个按钮,当用户按下它时,它会变为红色或绿色…假设脱机和buttonSelected属性处于组件状态,类似的功能应该可以工作 一般的想法是有条件地为on/offline和button unselected/selected选择正确的类。然后将这些类放入样式数组中。有几种方法可以满足您的需求,本例只是其中一种方法 render() { let offlineStyle = (
render()
{
let offlineStyle = (this.state.offline)?styles.offline:styles.online;
let activeStyle = (this.state.buttonSelected)?styles.active:styles.inactive;
return (
<View>
<TouchableOpacity style={[styles.general, offlineStyle, activeStyle]}>
<Text>Book</Text>
</TouchableOpacity>
</View>
);
}
...
const styles = StyleSheet.create({
general: {
borderWidth:1,
borderColor:'gray'
},
online: {
backgroundColor:'red'
},
offline: {
backgroundColor:'green'
},
active: {
backgroundColor:'blue'
},
inactive: {
}
});
可以将数组传递给样式道具以应用多个样式。当发生冲突时,列表中的最后一个优先
import React, { Component`enter code here` } from 'react';
import { View, Text, StyleSheet ,TouchableOpacity} from 'react-native';
const styles = StyleSheet.create({
red: {
color: 'red'
},
greenUnderline: {
color: 'green',
textDecoration: 'underline'
},
x:{
},
y:{
}
big: {
fontSize: 30
}
});
class Example extends Component {
render() {
return (
<View>
<TouchableOpacity style ={[stlyes.x , styles.y]}>
<Text style={[styles.red, styles.big]}>Big red</Text>
</TouchableOpacity>
<Text style={[styles.red, styles.greenUnderline]}>Green
underline</Text>
<Text style={[styles.greenUnderline, styles.red]}>Red underline</Text>
<Text style={[styles.greenUnderline, styles.red, styles.big]}>Big red
underline</Text>
<Text style={[styles.big, {color:'yellow'}]}>Big yellow</Text>
</View>
);
}
}
}您是在谈论使用CSS在React Native上进行样式设置吗?不是,通过样式表,您可以添加一个您尝试执行的代码示例吗?在这里预订我想在touchableOpacity组件中添加两个类一个设置边框等,另一个将在用户脱机时背景颜色设置为红色,在用户联机时背景颜色设置为绿色,在用户脱机时背景颜色设置为蓝色你应该指出具体的代码并给出一个简单的解释,而不是仅仅在没有任何解释的情况下发布整个工作代码。