以虚线样式显示本机顶部和底部边框

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;