react-native - 有反应原生复选框的例子吗？

Question

有没有实现 react-native CheckBox 的简单示例？ Facebook 没有提供任何示例。我所指的 CheckBox 组件可以在此处的文档中找到:http://facebook.github.io/react-native/docs/checkbox.html

Answer 1

您可以创建自己的。

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

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

创建文件组件/CheckBox/index.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

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

import { StyleSheet } from 'react-native'

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

export default styles

如何使用

import React, { Component } from 'react'

import styles from './styles'

import { CheckBox } from '../../components'

import { View } from 'react-native'

class Signup extends Component {

    state = {
        termsAccepted: false
    }

    handleCheckBox = () => this.setState({ termsAccepted: !this.state.termsAccepted })

    render() {
        return (
            <View style={{}}>
                <CheckBox 
                    selected={this.state.termsAccepted} 
                    onPress={this.handleCheckBox}
                    text='Accept terms and conditions'
                />               
            </View>
        )
    }
}

export default Signup