React Native(单选实现,2017-09-05)

多选.gif

import React, {Component} from "react";
import {Button, StyleSheet, Text, View, Image, TouchableOpacity} from "react-native";


export default class RadioGroup extends Component {


    constructor(props) {
        super(props)

        this.state = {
            selectIndex: this.props.selectIndex ? this.props.selectIndex : '',
            data: this.props.data ? this.props.data : [{title: '男',}, {title: '女'}],
        };
    }


    render() {
        let newArray = this.state.data;
        return (
            
                {
                    newArray.map((item, index) =>

                        this.renderRadioButton(newArray, item, this.onPress, index, this.state.selectIndex)
                    )
                }
            
        )
    }


    onPress = (index, item)=> {
        let array = this.state.data;
        for (let i = 0; i < array.length; i++) {
            let item = array[i];
            item.select = false;
            if (i == index) {
                item.select = true;
            }
        }
        this.setState({selectIndex: index});
        this.props.onPress ? this.props.onPress(index, item) : ()=> {
        }
    }

    renderRadioButton(array, item, onPress, index, sexIndex) {

        let backgroundColor = 'red';
        let image = item.image
        if (item.select == true) {
            image = item.image2;
            backgroundColor = 'blue';
        } else {
            image = item.image;
            backgroundColor = 'red';
        }

        if (sexIndex == index && sexIndex != '') {
            backgroundColor = 'blue';
            image = item.image2;
        }
        // let childViewWidth = item.childViewWidth ? item.childViewWidth : 100;
        // let childViewHeight = item.childViewHeight ? item.childViewHeight : 44;
        // let childViewbackgroundColor = item.childViewbackgroundColor ? item.childViewbackgroundColor : 'white';
        //
        //
        // let imageWidth = item.imageWidth ? item.imageWidth : 20;
        // let imageHeigt = item.imageHeigt ? item.imageHeigt : 20;


        return (
             {
                onPress(index, item)
            }} style={[{
                width: 100,
                height: 43,
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
            },this.props.conTainStyle]}>
                
                {item.title}
            
        )
    }
}
const styles = StyleSheet.create({
    contain: {
        flex: 1,
        backgroundColor: 'white',
    }
});

import React, {PureComponent} from 'react'
import {View, Text, StyleSheet, ScrollView, TouchableOpacity, ListView, Image, Dimensions} from 'react-native'
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
let {width, height} = Dimensions.get('window');

import RadioGroup  from './RadioGroup';

export default class CircleList extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            sexArray: [
                {
                    title: '男',
                    image:  require('../../res/img/circle/没选中.png'),
                    image2:require('../../res/img/circle/选中.png'),
                },
                {
                    title: '女',
                    image:  require('../../res/img/circle/没选中.png'),
                    image2:require('../../res/img/circle/选中.png'),
                }
            ],
        };
    }


    render() {
        return (
            
                 {
                        console.warn(index)
                        console.warn(item.title)
                    }}
                />
                 {
                        console.warn(index)
                        console.warn(item.title)
                    }}
                />
            
        )
    }
}