React Native 分段控制选项卡 - Javascript

在React Native中，分段控制选项卡是实现带有分段控制选项卡的app的常用方法。以下是如何使用Javascript在React Native中实现分段控制选项卡的介绍。

组件

我们可以使用内置组件SegmentedControlIOS来实现分段控制选项卡。

import { SegmentedControlIOS } from 'react-native';

<SegmentedControlIOS
  values={['One', 'Two']}
  selectedIndex={this.state.selectedIndex}
  onChange={(event) => {
    this.setState({
      selectedIndex: event.nativeEvent.selectedSegmentIndex,
    });
  }}
/>

该组件将创建一个基本的分段控制选项卡，其中您可以设置选项的标签和一个回调来处理用户的交互。

样式和自定义

虽然该组件提供了基本的样式和功能，但我们也可以通过样式和自定义来调整该组件。

可以使用props来自定义此组件的样式，如tintColor和backgroundColor等。同时，我们也可以自定义每个选项卡的样式和功能。

以下是一个例子，演示如何使用样式和自定义来创建具有圆形选项卡标签的分段控制选项卡。

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

const options = ['One', 'Two', 'Three', 'Four'];

export default class CustomSegmentControl extends React.Component {
  state = {
    selectedIndex: 0,
  };

  render() {
    const { selectedIndex } = this.state;

    return (
      <View style={styles.segmentControlContainer}>
        <View style={styles.segmentControl}>
          {options.map((option, index) => (
            <View key={option} style={styles.optionContainer}>
              <TouchableOpacity
                onPress={() =>
                  this.setState({
                    selectedIndex: index,
                  })
                }
                activeOpacity={0.7}
                style={[
                  styles.option,
                  index === selectedIndex && styles.selectedOption,
                ]}
              >
                <Text
                  style={[
                    styles.optionLabel,
                    index === selectedIndex &&
                      styles.selectedOptionLabel,
                  ]}
                >
                  {option}
                </Text>
              </TouchableOpacity>
            </View>
          ))}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  segmentControlContainer: {
    alignItems: 'center',
    marginTop: 20,
  },
  segmentControl: {
    flexDirection: 'row',
    backgroundColor: '#F2F2F2',
    borderRadius: 100,
    overflow: 'hidden',
  },
  optionContainer: {
    flex: 1,
    height: 50,
    marginHorizontal: 5,
  },
  option: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 100,
  },
  selectedOption: {
    backgroundColor: '#007AFF',
  },
  optionLabel: {
    color: '#007AFF',
    fontSize: 18,
    fontWeight: '500',
  },
  selectedOptionLabel: {
    color: '#FFF',
  },
});

这个自定义的分段控制选项卡具有圆形选项卡标签和一个当用户点击选项时更新状态的交互回调。

结论

React Native中的分段控制选项卡是创建app的一个常用UI组件。使用Javascript和React Native内置组件SegmentedControlIOS，可以轻松创建具有自定义样式和交互的分段控制选项卡。