Css 如何为 React Native switch 组件创建标签

发布于02月25日

通常，您可以使用Label html元素为Web应用程序添加标签.您如何在Reaction Native中实现此结果？

下面是我正在使用的Reaction本机switch 组件:https://reactnative.dev/docs/switch

当我try 手动添加文本作为标签时，它的格式不正确.这只是一个CSS问题，还是有我可以使用的标签元素？

<Text> Deliverable?</Text>
   <Switch
     trackColor={{ false: '#767577', true: '#81b0ff' }}
     thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
     ios_backgroundColor="#3e3e3e"
     onValueChange={toggleSwitch}
     value={isEnabled}
     style={styles.switch}
  />

推荐答案

我不知道你如何try 手动添加Text作为Label，但正如你所说，你必须玩Switch,Text|Image...还有大约Styles美元才能得到你想要的.

这是一个简单的代码示例:

import React, { useState } from "react"
import { View, Text, StyleSheet, Switch } from "react-native"

export function App() {
  const [value, setValue] = useState(false)

  const onValueChange = value => {
    setValue(value)
  }
  return (
    <View style={styles.container}>
      <View style={styles.switchContainer}>
        <Text>{value ? "ON" : "OFF"}</Text>
        <Switch
          style={styles.switch}
          onValueChange={onValueChange}
          value={value}
        />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  switchContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  switch: {
    marginLeft: 10
  }
})