自定義ReactNative滑塊-有解無憂

有誰知道如何在 react-native 中呈現滑塊，如下所示，具有不同的部分？到目前為止，只見過一條線和一個點的滑塊。

自定義 React Native 滑塊

uj5u.com熱心網友回復：

您可以使用 LayoutAnimation 來實作這種型別的滑塊。找到下面的代碼來完成它。

import React, { useState } from 'react';
import {Button,LayoutAnimation,Platform,StyleSheet,Text,UIManager,View} from 'react-native';

if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

const step = ['1', '2', '3', '4', '5', '6', '7'];
const activeColor = '#444';

export default function TrackingStatus() {
  const [activeIndex, setActive] = useState(0);
  const setActiveIndex = (val) => {
    LayoutAnimation.easeInEaseOut();
    setActive(val);
  };
  const marginLeft = (100 / (step.length - 1)) * activeIndex - 100   '%';
  return (
    <View style={styles.constainer}>
      <Text style={styles.prop}>{activeIndex}</Text>
      <View style={styles.statusContainer}>
        <View style={styles.line}>
          <View style={[styles.activeLine, { marginLeft }]} />
        </View>
        {step.map((step, index) => (
          <View style={[styles.dot]} key={step}>
            <View
              style={[
                index <= activeIndex
                  ? { height: '100%', width: '100%' }
                  : { height: '0%', width: '0%' },
                { backgroundColor: activeColor, borderRadius: 20 },
              ]}
            />
          </View>
        ))}
      </View>
      <View style={styles.btns}>
        <Button
          title="prev"
          onPress={() => setActiveIndex(activeIndex - 1)}
          disabled={activeIndex <= 0}
        />
        <Button
          title="next"
          onPress={() => setActiveIndex(activeIndex   1)}
          disabled={activeIndex >= step.length - 1}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  constainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 30,
  },
  statusContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    height: 70,
    justifyContent: 'space-between',
  },
  dot: {
    height: 15,
    width: 15,
    borderRadius: 10,
    backgroundColor: '#ccc',
    overflow: 'hidden',
    alignItems: 'center',
    justifyContent: 'center',
  },    
  line: {
    height: 5,
    width: '100%',
    backgroundColor: '#ccc',
    position: 'absolute',
    borderRadius: 5,
    overflow: 'hidden',
  },
  activeLine: {
    height: '100%',
    width: '100%',
    backgroundColor: activeColor,
    borderRadius: 5,
  },
  btns: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    marginTop: 20,
  },
  prop: {
    marginBottom: 20,
    width: 100,
    textAlign: 'center',
  },
});

在上面的代碼中，我們只是根據需要創建了一個 UI 克隆，并添加了 margin-left 以及用顏色填充點。就在改變 margin-left & dot colour 的狀態之前，我們添加了布局影片來為進度添加影片效果。

輸出自定義 React Native 滑塊

我希望這個解釋能幫助你理解作業

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/436514.html

標籤：反应反应式用户界面移动的

上一篇：顫動中的文本欄位

下一篇：移動到另一個螢屏時停止子NSWindow消失