样式 React Native 开关组件

Question

我正在使用 React Native 开发移动应用程序。该项目需要一个自定义按钮来提供布尔类型的输入。但我不知道如何为此创建这种自定义组件。我进行了一项研究，并尝试使用 react-native 开关创建此自定义按钮（从 'react-native'; 导入 { 开关}）。不过好像很难做造型。

我不确定实现该目标的最佳方法是什么？使用开关组件？请帮助我为此找到更好的解决方案或新方法。

谢谢。

Answer 1

我在 React Native 中制作了一个自定义开关，您可以在其中进行样式设置，源代码如下 -

import React from 'react'
import { Text, TouchableOpacity } from 'react-native'
import styled from 'styled-components/native'

class App extends React.Component {
  state = {
    active: false
  }
  handleOFF = () => {
    this.setState({
      active: false
    });

  }

  handleOn = () => {
    this.setState({
      active: true
    });
  }

  render() {
    return (
      <MainView>
        <Label>
          <LabelOff onPress={this.handleOFF} active={this.state.active} activeOpacity={0.8}>
            <Off>OFF</Off>
          </LabelOff>
          <LabelOn onPress={this.handleOn} active={this.state.active} activeOpacity={0.8}>
            <On>ON</On>
          </LabelOn>
        </Label>
      </MainView>
    )
  }
}


const MainView = styled.View`
  margin:50px;
`
const Label = styled.View`
  height:60px;
  width:240px;
  flex-direction:row;
  justify-content:space-around;
  align-items:center;
  background-color:transparent;
`

const LabelOff = styled.TouchableOpacity`
  height:60px;
  width:120px;
  background-color:${props => props.active ? 'transparent' : '#cb6161'};
  border:2px solid #cb6161;
  border-right-width:0px;
  align-items:center;
  justify-content:space-around;
`
const LabelOn = styled.TouchableOpacity`
  height:60px;
  width:120px;
  background-color:${props => props.active ? '#55acee' : 'transparent'};
  border:2px solid #55acee;
  border-left-width:0px;
  align-items:center;
  justify-content:space-around;
`
const Off = styled.Text`
  font-size:22px;
`
const On = styled.Text`
  font-size:22px;
`
export default App

自定义开关完成！

样式 React Native 开关组件

Style React Native switch component

toggle

custom-component

react-native