React-Native SegmentedControlIOS

SegmentedControlIOS这是一个分段显示多个选项的组件

效果：

3F72C4D2-0748-4FC4-B668-91CC1A2DBD1A.png

属性：

values：按顺序每一个段落的标题文字
selectedIndex：组件显示时，一开始被选中的段落的下标
onValueChange：当用户点击某一段的时候调用，返回参数是被选中段的值（也就是values中的值）
onChange：当用户点击某一段的时候调用，参数是一个事件对象
tintColor：被选中的段的颜色，包含外边框的颜色
momentary：如果为true，选中的段不会一直保持选中的特效，但onValueChange回调还是会正常工作
enabled：如果为false，用户不能与此控件交互。默认为true

创建一个SegmentedControlIOS：

<SegmentedControlIOS  values={['one', 'two']}/>

完整事例：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    SegmentedControlIOS,
    View,
    Text
} from 'react-native';
class SegmentedView_1 extends Component {
    render(){
        return(
            <View style={styles.subView}>
                <Text>第二个SegmentedControlIOS设置momentary为true，表示没有选中状态</Text>
                <SegmentedControlIOS style={styles.segmented}
                                     values={['one', 'two']}/>
                <SegmentedControlIOS style={styles.segmented}
                                     values={['One', 'Two', 'Three', 'Four', 'Five']}
                                     momentary={true}/>
            </View>
        )
    }
}
class SegmentedView_2 extends Component {
    constructor(props){
        super(props);
        this.state={
            selectedIndex: 0,
            value: 'aaa'
        }
    }
    _onChange =(event)=> {
        this.setState({
            selectedIndex: event.nativeEvent.selectedSegmentIndex,
        });
    };
    _onValueChange =(value)=> {
        console.log('_onValueChange' + value);
        this.setState({
            value: value,
        });
    };
    render(){
        return(
            <View style={styles.subView}>
                <Text>修改选择颜色，添加调用的onChange和onValueChange</Text>
                <SegmentedControlIOS style={styles.segmented}
                                     values={['one', 'two', 'Three', 'Four']}
                                     selectedIndex={0}
                                     tintColor={'#fa0a0f'}/>
                <SegmentedControlIOS style={styles.segmented}
                                     values={['one', 'two', 'Three', 'Four']}
                                     selectedIndex={this.state.selectedIndex}
                                     onChange={this._onChange}
                                     onValueChange={this._onValueChange}/>
                <Text style={styles.text}>
                    选择的value: {this.state.value} 当前选择的位置：{this.state.selectedIndex}
                </Text>
            </View>
        )
    }
}
class SegmentedView_3 extends Component {
    render(){
        return(
            <View style={styles.subView}>
                <Text>设置了enabled属性为false</Text>
                <SegmentedControlIOS style={styles.segmented}
                                     values={['one', 'two', 'Three', 'Four']}
                                     enabled={false}
                                     selectedIndex={2}
                                     tintColor={'#1affa1'}/>
            </View>
        )
    }
}
export default class RNSegmentedView extends Component {
    render(){
        return(
            <View style={styles.mainView}>
                <SegmentedView_1/>
                <SegmentedView_2/>
                <SegmentedView_3/>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    mainView: {
        flex: 1,
        backgroundColor: '#aaaaaa',
        alignItems: 'center'
    },
    subView: {
        backgroundColor: '#ffffff',
        alignItems: 'center',
        marginTop: 40,
        width: 320,
        padding: 10,
        borderRadius: 5
    },
    segmented: {
        width: 280,
        marginTop: 20
    },
    text: {
        marginTop: 20,
    }
});
AppRegistry.registerComponent('RNSegmentedView', ()=>RNSegmentedView);