Реагируйте на родную верхнюю и нижнюю границу пунктирным стилем

Question

Я пытаюсь применить границу для вида сверху и снизу только с "пунктирным" стилем. Но borderStyle не работает с borderTopWidth и borderBottomWidth. Это работает,

<View
  style={{
    backgroundColor: 'white',
    borderRadius: 10,
    marginHorizontal: 20,
    padding: 16,
    borderStyle: 'dashed',
    borderColor: 'red',
    borderWidth: 1
  }}>{...content...}</View>

Это не работает,

<View
  style={{
    backgroundColor: 'white',
    borderRadius: 10,
    marginHorizontal: 20,
    padding: 16,
    borderStyle: 'dashed',
    borderBottomColor: 'red',
    borderBottomWidth: 1,
    borderTopColor: 'red',
    borderTopWidth: 1,
  }}>{...content...}</View>

Есть ли другой способ достижения этого стиля?

Answer 1

Попробуйте это

import React, { Component } from "react";
import { StyleSheet, View } from "react-native";

function Index(props) {
  return <View style={styles.container}></View>;
}

const styles = StyleSheet.create({
  container: {
    width: 126,
    height: 46,
    backgroundColor: "rgba(255,255,255,1)",
    borderColor: "rgba(255,0,0,1)",
    borderWidth: 0,
    borderTopWidth: 2,
    borderBottomWidth: 2,
    borderStyle: "dashed"
  }
});

export default Index;

Примечание: у меня есть дизайн BuilderX