正在react native中创建分隔符

Question

我正在尝试在文本之间创建一条分隔线。

这是我的分离器组件

import { View, StyleSheet } from "react-native";
const Seperator = () => {
return <View style={styles.seperator} />;
};
const styles = StyleSheet.create({
seperator: {
borderBottomColor: "red",
borderBottomWidth: StyleSheet.hairlineWidth,
marginVertical: 1,
},
});
export default Seperator;

这是我正在尝试使用seperator的设置屏幕。

import { View, Text, StyleSheet } from "react-native";
import Seperator from "../components/Seperator";
const SettingsScreen = () => {
return (
<View style={styles.container}>
<Text>I'm a SettingsScreen</Text>
<Seperator />
<Text>I'm a SettingsScreen</Text>
<Seperator />
<Text>I'm a SettingsScreen</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "blue",
},
});
export default SettingsScreen;

我做了很多搜索，但找不到解决方案。

Answer 1

在分离器组件中尝试此操作

const styles = StyleSheet.create({
seperator: {
height: 1,
backgroundColor: "red",
marginVertical: 1,
},
});

或者你可以给

我添加了height+你可以给height: StyleSheet.hairlineWidth，并删除了borderBottomColor: "red"

我希望这能有所帮助。