React Native iOS 独有组件之 Segmented

使用 SegmentedControlIOS 来在 iOS 设备上渲染一个 UISegmentedControl 组件。这是一个分段显示多个选项的组件。

属性

名称	类型	必填	说明
enabled	bool	否	是否禁用
momentary	bool	否	选中后背景颜色很快消失
onChange	function	否	选项发生变化时调用
onValueChange	function	否	选项发生变化时调用
selectedIndex	number	否	一开始被选中的索引
tintColor	string	否	背景、边框、字体颜色
values	array of string	否	数据

实例

1. 逻辑代码

import React, {Component} from 'react';
import {
  StyleSheet,
  Alert,
  SegmentedControlIOS,
  View
} from 'react-native';

export default class App extends Component {
  _onChange = (event)=>{
    var s = 'onChange参数属性:selectedSegmentIndex：'+
        event.nativeEvent.selectedSegmentIndex+'\n'+
        'target:'+event.nativeEvent.target+'\n'+
            'value:'+event.nativeEvent.value;
    Alert.alert(s);
  }

  onValueChange = (value)=>{
    Alert.alert('onValueChange:'+value);
  }

  render() {
    return (
      <View style={styles.container}>
        <SegmentedControlIOS
          style = {styles.segmented}
          selectedIndex = {1}
          onChange = {this._onChange}
          onValueChange = {this.onValueChange}
          tintColor = 'blue'
          values = {['关注','论坛','发现']}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },

  segmented: {
    marginTop:40
  }
 
});

2. 效果图

SegmentedControllIOS.jpg