React Native 中的进度条 UI 自定义设计

Question

我对本机和 javascript 做出反应还很陌生，我必须用四个类别制作这种类型的进度条。

任何人都可以帮助或建议我如何在两个平台上实现这个 UI 以响应原生的 android 和 iOS？

预期的输出屏幕截图附在下面：

但是，我不需要用户交互或进度动画，我只需要以百分比显示修复进度。

Answer 1

使用absoluteposition 将元素、边框、进度等堆叠在一个容器中。

像这样的东西可以工作：

<View style={styles.container}>
  <View style={styles.border}/>
  <View style={styles.progress}/>
  <View style={styles.scale}>
    <View style={styles.line}/>
    <View style={styles.line}/>
    <View style={styles.line}/>
    <View style={styles.line}/>
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    margin: 8,
  },
  border: {
    top: 10,
    left: 0,
    position: 'absolute',
    width: '100%',
    height: 50,
    borderRadius: 25,
    borderWidth: 2,
    borderColor: 'black',
  },
  progress: {
    top: 10,
    left: 0,
    position: 'absolute',
    width: '50%',
    height: 50,
    borderRadius: 25,
    backgroundColor: 'grey'
  },
  scale: {
    position: 'absolute',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    height: 70,
  },
  line: {
    width: 2,
    height: 70,
    backgroundColor: 'black',
  },
});