2016-02-10 5 views
3

я запутался с использованием SegmentedControlIOS в реакции родным, я проверить его в тренажере IOS он работает, но когда я проверить его в андроиде он выдает ошибку, как показано нижеSegmentedControlIOS андроид в реакцию родной

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, любая помощь в этом отношении очень ценится.

ответ

4

SegmentedControl - встроенный компонент на iOS. Однако на Android нет прямого эквивалента, поэтому название родного компонента реакции заканчивается IOS и не поддерживается на Android. Нет очевидного способа заставить встроенный компонент работать на Android.

Это оставляет вас с двумя вариантами:

  • Использование или создать свою собственную версию, используя стандартные компоненты. Этот library имеет хорошее приближение сегментированного элемента управления, который будет работать в обеих операционных системах.

  • Используйте два отдельных компонентов на прошивкой и Android, которые могут быть сделаны автоматически путем создания двух файлов с именами: componentName.android.js и componentName.ios.js (см here для получения дополнительной информации, используя другой код для каждой платформы). Специфичный код iOS может использовать сегментированный элемент iOS, и версия Android может использовать что-то вроде https://github.com/zzyyppqq/react-native-segmented-android или пользовательскую реализацию.

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; 
0

Хороший эквивалент SegmentedControlIOS должен быть Размах Просмотров с видом на закладках: https://developer.android.com/training/implementing-navigation/lateral.html

Чтобы использовать его в React нативный Android версии вы можете использовать эту библиотеку: https://github.com/skv-headless/react-native-scrollable-tab-view

Это странно, реагирующие туземца команда не цель этот родной компонент, построенный в рамках

Смежные вопросы