Qunar React Native 组件

Checked 勾选组件 >=v1.0.0

注意：这是一个受控组件，checked状态由React传进来，对它本身的操作并不会直接改变checked状态。
Checked
属性
hasBorder { React.PropTypes.bool }
是否为有border的形态
checked { React.PropTypes.bool }
选中状态
onPress { React.PropTypes.func }
点击回调，可从e.target.checked中获取当前选中状态
style { Text.propTypes.style }
组件样式，check/uncheck状态均生效
checkStyle { Text.propTypes.style }
组件样式，只在check状态生效
uncheckStyle { Text.propTypes.style }
组件样式，只在uncheck状态生效
示例

import React, {Component, StyleSheet, TouchableOpacity, View, Text, Checked} from 'qunar-react-native'

// 默认checked: 单选列表
class CheckedSingleExample extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedIndex: -1
        }
    }

    render() {
        const {exampleType} = this.props
        const {selectedIndex} = this.state

        const ROWS_INDEX = [0, 1, 2]
        return (
            <View>
                {
                    ROWS_INDEX.map((rowIndex) => {
                        return(
                            <TouchableOpacity
                                key={rowIndex}
                                activeOpacity={1}
                                style={styles.exampleRow}
                                onPress={() => this.setState({selectedIndex: rowIndex})}
                            >
                                <Text style={selectedIndex === rowIndex ? {color: '#1ba9ba'} : null}>选择该行控制checked</Text>
                                <Checked checked={selectedIndex === rowIndex}/>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
        )
    }
}

// checked(hasBorder={true}): 多选列表
class CheckedMultipleExample extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedIndexes: []
        }
    }

    render() {
        const {exampleType} = this.props
        let {selectedIndexes} = this.state

        const ROWS_INDEX = [0, 1, 2]
        return (
            <View>
                {
                    ROWS_INDEX.map((rowIndex) => {
                        return(
                            <TouchableOpacity
                                key={rowIndex}
                                activeOpacity={1}
                                style={styles.exampleRow}
                                onPress={(e) => {
                                    const indexOfRowIndex = selectedIndexes.indexOf(rowIndex)
                                    if(indexOfRowIndex > -1){
                                        selectedIndexes.splice(indexOfRowIndex, 1)
                                    } else{
                                        selectedIndexes.push(rowIndex)
                                    }
                                    this.setState({selectedIndexes})
                                }}
                            >
                                <Text style={selectedIndexes.indexOf(rowIndex) > -1 ? {color: '#1ba9ba'} : null}>
                                    选择该行控制checked
                                </Text>
                                <Checked hasBorder={true} checked={selectedIndexes.indexOf(rowIndex) > -1}/>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
        )
    }
}

// 混合全选列表
class CheckedMixedExample extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedAll: false,
            selectedIndexes: []
        }
    }

    render() {
        const {exampleType} = this.props
        let {selectedIndexes, selectedAll} = this.state

        const ROWS_INDEX = [0, 1, 2]
        return (
            <View>
                <TouchableOpacity
                    activeOpacity={1}
                    style={styles.exampleRow}
                    onPress={() => {
                        if(selectedAll){
                            this.setState({
                                selectedAll: false,
                                selectedIndexes: [],
                            })
                        } else{
                            this.setState({
                                selectedAll: true,
                                selectedIndexes: ROWS_INDEX,
                            })
                        }
                    }}
                >
                    <Text style={selectedAll ? {color: '#1ba9ba'} : null}>
                        全选
                    </Text>
                    <Checked checked={selectedAll}/>
                </TouchableOpacity>
                {
                    ROWS_INDEX.map((rowIndex) => {
                        return(
                            <TouchableOpacity
                                key={rowIndex}
                                activeOpacity={1}
                                style={styles.exampleRow}
                                onPress={() => {
                                    const indexOfRowIndex = selectedIndexes.indexOf(rowIndex)
                                    if(indexOfRowIndex > -1){
                                        selectedIndexes.splice(indexOfRowIndex, 1)
                                    } else{
                                        selectedIndexes.push(rowIndex)
                                    }

                                    selectedAll = ROWS_INDEX.length === selectedIndexes.length

                                    this.setState({selectedIndexes, selectedAll})
                                }}
                            >
                                <Text style={selectedIndexes.indexOf(rowIndex) > -1 ? {color: '#1ba9ba'} : null}>
                                    选项{rowIndex}
                                </Text>
                                <Checked hasBorder={true} checked={selectedIndexes.indexOf(rowIndex) > -1}/>
                            </TouchableOpacity>
                        )
                    })
                }
            </View>
        )
    }
}

// onPress回调
class CheckedCallbackExample extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selected: false
        }
    }

    render() {
        const {exampleType} = this.props
        const {selected} = this.state

        return (
            <View style={styles.exampleRow}>
                <Text style={selected ? {color: '#1ba9ba'} : null}>
                    点击Checked触发回调
                </Text>
                <Checked hasBorder={true}
                    checked={selected}
                    onPress={(e) => {this.setState({selected: !e.target.checked})}}
                />
            </View>
        )
    }
}

// 单选列表 自定义样式
class CheckedStyleExample extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedIndex: -1
        }
    }

    render() {
        const {exampleType} = this.props
        const {selectedIndex} = this.state

        return (
            <View>
                <TouchableOpacity
                    activeOpacity={1}
                    style={styles.exampleRow}
                    onPress={() => {this.setState({selectedIndex: 0})}}
                >
                    <Text style={selectedIndex === 0 ? {color: '#1ba9ba'} : null}>
                        hasBorder: false - 自定义样式
                    </Text>
                    <Checked hasBorder={false}
                        checked={selectedIndex === 0}
                        style={{width: 20, height: 20, fontSize: 20}}
                        uncheckStyle={{color: '#aaa'}}
                        checkStyle={{color: 'red'}}
                    />
                </TouchableOpacity>
                <TouchableOpacity
                    activeOpacity={1}
                    style={styles.exampleRow}
                    onPress={() => {this.setState({selectedIndex: 1})}}
                >
                    <Text style={selectedIndex === 1 ? {color: '#1ba9ba'} : null}>
                        hasBorder: true - 自定义样式
                    </Text>
                    <Checked hasBorder={true}
                        style={{width: 20, height: 20, fontSize: 14, padding: 2, borderRadius: 0}}
                        checked={selectedIndex === 1}
                    />
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    exampleRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingTop: 2,
        paddingBottom: 2,
    }
})
Qunar React Native 组件

Checked 勾选组件 >=v1.0.0

hasBorder { React.PropTypes.bool }

checked { React.PropTypes.bool }

onPress { React.PropTypes.func }

style { Text.propTypes.style }

checkStyle { Text.propTypes.style }

uncheckStyle { Text.propTypes.style }
