Question

我是react-native的新手，想将两个类添加到单个组件中，例如Single File或context.github.repos.getContents。我有一个按钮，当用户按下该按钮时会变成红色或绿色...

Answer 1

类似的事情应该起作用，（假设offline和buttonSelected属性处于组件状态）

总体思路是有条件地为联机/脱机和未选择/选择的按钮选择正确的类。然后，将这些类放入样式数组中。有多种方法可以执行您想要的操作，此示例只是一种方法。

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: {
      }
 });

Answer 2

您可以将数组传递给样式道具以应用多种样式。发生冲突时，列表中的最后一个优先。

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

     }

    }

}

如何为“本机”组件（如“视图”或任何其他组件）指定两个类？

2 个答案: