React-Native SegmentedControlIOS属性解析

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

效果：

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

属性：

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

创建一个SegmentedControlIOS：

完整事例：

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    SegmentedControlIOS,
    View,
    Text
} from 'react-native';
class SegmentedView_1 extends Component {
    render(){
        return(
            
                第二个SegmentedControlIOS设置momentary为true，表示没有选中状态
                
                
            
        )
    }
}
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(
            
                修改选择颜色，添加调用的onChange和onValueChange
                
                
                
                    选择的value: {this.state.value} 当前选择的位置：{this.state.selectedIndex}
                
            
        )
    }
}
class SegmentedView_3 extends Component {
    render(){
        return(
            
                设置了enabled属性为false
                
            
        )
    }
}
export default class RNSegmentedView extends Component {
    render(){
        return(
            
                
                
                
            
        )
    }
}
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);