1. 首頁
  2. 問答
  3. SegmentedControlIOS爲Android在反應母語

SegmentedControlIOS爲Android在反應母語

2016-02-10 77 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

相關問題

 相關問題