用于android的SegmentedControlIOS in react-native

Question

我对于反应原生的SegmentedControlIOS的使用感到困惑，我在IOS模拟器中检查它是否有效，但当我在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>

任何人都可以向我提供有关如何在Android和IOS上使用SegmentedControlIOS的建议，非常感谢您对此方面的任何帮助。

Answer 1

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或自定义实现。

Answer 2

参见react-native-segmented-control-tab 两种平台之间的类似用法：

__

-

或

请参阅ButtonGroup

中的react-native-elements

https://react-native-training.github.io/react-native-elements/docs/button_group.html

Answer 3

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

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

Answer 4

SegmentedControlIOS的一个很好的等价物应该是使用标签视图滑动视图： https://developer.android.com/training/implementing-navigation/lateral.html

要在React Native android版本中使用它，您可以使用此库：https://github.com/skv-headless/react-native-scrollable-tab-view

奇怪的是，React Native的团队没有将这个本机组件用于框架