Question

我正在尝试在我的应用中添加复选框。我找到了一个复选框，但他们使用复选框的图片。我无法改变它的颜色。我在 react-native 中找不到任何正确的复选框。

是否有可用的自定义复选框？

Answer 1

我在我的应用中使用了这个插件。这很容易安装。

ReactNativeEasyCheckbox

希望它会对你有所帮助。

Answer 2

你可以使用eact-native-elements checkbox使用矢量图标，你可以设置颜色

Answer 3

您可以使用 Native Base 或 React-Native-Elements'复选框。这些是组件的React-Native库，因此它们将来也可以派上用场。

Native Base's checkbox

React-Native-Elements' checkbox

Answer 4

import React, { Component } from 'react'
import styled from 'styled-components'
import { TouchableOpacity, View } from 'react-native'
const CustomCheckBox = styled(View)`
  height: 24px;
  width: 24px;
  background: ${props => (props.checkBoxActive ? '#448ccb' : 'transparent')};
  border-radius: 0px;
  position: relative;
  justify-content: center;
  margin: 0px 8px 0 0;
  border: solid 1px #e1e4e5;
`
const CheckIcon = styled(View)`
  border-radius: 0px;
  align-self: center;
  transform: rotate(-30deg);
`
/*==============================
    Custom  checkbox styled 
===============================*/
const CheckIconWrapper = styled(View)`
  position: relative;
  left: 2px;
  top: -2px;
`
const CheckIconVertical = styled(View)`
  height: 5px;
  width: 2px;
  background: ${props => (props.checkBoxActive ? '#fff' : 'transparent')};
`
const CheckIconHorizontal = styled(View)`
  height: 2px;
  width: 16px;
  background: ${props => (props.checkBoxActive ? '#fff' : 'transparent')};
`
class CheckBox extends Component {
  state = {
    checkBox: false
  }
  render() {
    return (
      <TouchableOpacity
        onPress={() => {
          this.setState({ checkBox: !this.state.checkBox })
        }}>
        <CustomCheckBox checkBoxActive={this.state.checkBox}>
          <CheckIcon>
            <CheckIconWrapper>
              <CheckIconVertical checkBoxActive={this.state.checkBox} />
              <CheckIconHorizontal checkBoxActive={this.state.checkBox} />
            </CheckIconWrapper>
          </CheckIcon>
        </CustomCheckBox>
      </TouchableOpacity>
    )
  }
}
export default CheckBox

复制过去的该组件

是否有反应原生自定义复选框可用？

4 个答案: