1. 首页
  2. 问答
  3. SegmentedControlIOS为Android在反应母语

SegmentedControlIOS为Android在反应母语

2016-02-10 45 views
3

我很困惑与SegmentedControlIOS的反应母语的使用，我检查它在IOS模拟器它的工作原理，但是当我在android系统检查，它抛出一个错误如下SegmentedControlIOS为Android在反应母语

SegmentedControlIOS不支持这个平台

这里是我的代码：

<View > 
     <SegmentedControlIOS 
     tintColor="#D7D7D5" 
     style={styles.SegmentedControlIOS} 

     values={this.state.values} 
      selectedIndex={this.state.selectedIndex} 
      onChange={this._onChange} 
      onValueChange={(val) =>{ 
      this.setState({ 
       value:val 
      }) 
      }}/>   
     </View>

谁能给我介绍如何使用分段建议ControlIOS为Android和IOS，在这方面的任何帮助，非常感谢。

来源

2016-02-10 Hussian Shaik

回答

4

SegmentedControl是iOS中内置的本机组件。然而，在Android上没有直接的等价物，这就是为什么反应原生组件名以IOS结尾，并且不支持Android。没有明显的方式使内置组件在Android上运行。

这使得你有两个选择：

  • 使用或使用标准组件创建您自己的版本。这library有一个很好的近似的分段控制，可以在两个操作系统上工作。

  • 使用两个iOS和Android上独立的组件，可以自动创建一个名为两个文件来完成：componentName.android.js和componentName.ios.js（使用不同的代码为每个平台见here了解更多信息）。 iOS特定的代码可以使用iOS分段控件，Android版本可以使用类似https://github.com/zzyyppqq/react-native-segmented-android或自定义实现。

来源

2016-02-10 11:27:18 Max

1

非常简单的组件，100％与IOS版本兼容。

'use strict'; 

var React = require('react'); 
var ReactNative = require('react-native'); 
var { Component, View, Text, TouchableOpacity } = ReactNative; 

var SimpleSegmentedControl = React.createClass({ 
    getInitialState: function() { 
     return { 
      values: this.props.values || [], 
      selectedIndex: this.props.selectedIndex || 0, 
      style: this.props.style || {}, 
      onChange: this.props.onChange 
     }; 
    }, 

    componentWillReceiveProps: function (props) { 
     this.setState(props); 
    }, 

    onPress: function (selectedIndex) { 
     if (typeof this.state.onChange === 'function') { 
      return this.state.onChange(selectedIndex); 
     } 
    }, 

    render: function() { 
     return (
      <View style={[{flexDirection: 'row', borderWidth: 1, borderColor: '#007AFF', borderRadius: 5}, this.state.style]}> 
       {this.state.values.map(function (value, position, values) { 
        return (
         <TouchableOpacity key={position} onPress={()=>this.onPress(position)} style={{flex: 1}}> 
          <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', padding: 5, 
          backgroundColor: this.state.selectedIndex == position ? '#007AFF' : 'transparent', 
          borderRightWidth: position < values.length - 1 ? 1 : 0, borderRightColor: '#007AFF'}}> 
           <Text style={{fontSize: 13, color: this.state.selectedIndex == position ? 'white' : '#007AFF'}}>{value}</Text> 
          </View> 
         </TouchableOpacity> 
        ); 
       }.bind(this))} 
      </View> 
     ); 
    } 
}); 

module.exports = SimpleSegmentedControl;

来源

2016-08-04 12:55:32 VItaly

相关问题

 相关问题