react-native复选框示例？

Question

获取反应原生CheckBox工作/渲染的任何简单示例？这就是CheckBox，它现在似乎是本地提到的react-native的一部分：http://facebook.github.io/react-native/docs/checkbox.html

Answer 1

目前CheckBox组件仅在Android上受支持。正如here所述，对于iOS，您应该使用Switch。

对于Android，使用非常简单。

<View style={{ flexDirection: 'column'}}>
  <CheckBox />
  <View style={{ flexDirection: 'row' }}>
    <CheckBox
      value={this.state.checked}
      onValueChange={() => this.setState({ checked: !this.state.checked })}
    />
    <Text style={{marginTop: 5}}> this is checkbox</Text>
  </View>
</View>

View和Text组件是可选的，只是为了展示CheckBox如何与它们一起使用。 上面的代码将在Android设备上生成此屏幕。

这在iOS设备上

Answer 2

对于不了解以上答案的初学者

import React, { Component } from 'react';
import { Platform, View, Text, CheckBox } from 'react-native';


var tempCheckValues = [];
export default class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      checkBoxChecked: []
    }
  }

  checkBoxChanged(id, value) {

    this.setState({
      checkBoxChecked: tempCheckValues
    })

    var tempCheckBoxChecked = this.state.checkBoxChecked;
    tempCheckBoxChecked[id] = !value;

    this.setState({
      checkBoxChecked: tempCheckBoxChecked
    })

  }

  render() {

    const products = [{
      id: 1
    },
    {
      id: 2
    },
    {
      id: 3
    }];

    return (

      products.map((val) => {

        { tempCheckValues[val.id] = false }

        return (

          <View key={val.id} style={{ flexDirection: 'column' }}>

            <CheckBox

              value={this.state.checkBoxChecked[val.id]}

              onValueChange={() => this.checkBoxChanged(val.id, this.state.checkBoxChecked[val.id])}

            />

          </View >

        )

      }

      )

    );
  }
}

Answer 3

使用react-native-elements，任务更容易，并提供示例：

 import { CheckBox } from 'react-native-elements'

<CheckBox
  title='Click Here'
  checked={this.state.checked}
/>

<CheckBox
  center
  title='Click Here'
  checked={this.state.checked}
/>

<CheckBox
  center
  title='Click Here'
  checkedIcon='dot-circle-o'
  uncheckedIcon='circle-o'
  checked={this.state.checked}
/>

<CheckBox
  center
  title='Click Here to Remove This Item'
  iconRight
  iconType='material'
  checkedIcon='clear'
  uncheckedIcon='add'
  checkedColor='red'
  checked={this.state.checked}
/>

Answer 4

复选框已从 react-native 中移除，您可以从 @react-native-community/checkbox 安装并导入它。 https://github.com/react-native-checkbox/react-native-checkbox

Answer 5

您可以创建自己的。

您将需要安装react-native-vector-icons（或者可以使用图像）。

import numpy as np
x = np.array([1, 2, 3, 4]).reshape(-1, 1)
y = np.array([3, 4, 5, 6]).reshape(1, -1)
diff = x - y

创建文件组件/CheckBox/index.js

yarn add react-native-vector-icons
react-native link react-native-vector-icons

创建文件组件/CheckBox/styles.js

import React from 'react'
import Icon from 'react-native-vector-icons/MaterialIcons'

import styles from './styles'

import { TouchableOpacity, Text } from 'react-native'

const CheckBox = ({ selected, onPress, style, textStyle, size = 30, color = '#211f30', text = '', ...props}) => (
    <TouchableOpacity style={[styles.checkBox, style]} onPress={onPress} {...props}>
        <Icon
            size={size}
            color={color}
            name={ selected ? 'check-box' : 'check-box-outline-blank'}
        />

        <Text style={textStyle}> {text} </Text>
    </TouchableOpacity>
)

export default CheckBox

使用方法

import { StyleSheet } from 'react-native'

const styles = StyleSheet.create({
    checkBox: {
        flexDirection: 'row',
        alignItems: 'center'
    }
})

export default styles

Answer 6

您还可以尝试使用提供复选框和复选框列表的git repo。 试试这个-https://github.com/Rinkuk1993/rn-checkbox-list

Answer 7

import { MaterialIcons } from "@expo/vector-icons";

const [genderIndex, setGenderIndex] = useState(0);   
const genderList = ["Male", "Female", "Other"];

const genderChangeHandler = 
(index) => {
  // console.log("index \t", index);
  setGenderIndex((preIndex) => index);
}


 <View style={{ flexDirection: "row" }}>
                    {genderList.map((data, index) => (
                      <TouchableOpacity
                        key={data}
                        style={{
                          flexDirection: "row",
                          margin: 10,
                          flex: 3,
                          justifyContent: "space-evenly",
                        }}
                        onPress={genderChangeHandler.bind(this, index)}
                      >
                        <MaterialIcons
                          name={
                            index === genderIndex
                              ? "radio-button-checked"
                              : "radio-button-unchecked"
                          }
                          size={18}
                          color='#ccc'
                        />
                        <Text style={styles.termsText}>{data}</Text>
                      </TouchableOpacity>
                    ))}
</View> 

Answer 8

您可以在react native中使用状态功能创建自定义按钮，而不是使用复选框或选择器。

https://jsfiddle.net/kyazbs3j/2/

<TouchableOpacity onPress={() =>this.setState({stateExample:'Good'})}>
   <View style={this.state.stateExample=='Good styles.chooseItem:styles.chooseItem1'}>
       <Text style={styles.choosetxt}>Good</Text>
   </View>
</TouchableOpacity>