import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Fonts from '../Fonts';
import Screen from '../Screen';
const styles = StyleSheet.create({
container: {
alignItems: "center",
backgroundColor: "rgba(12, 22, 32, 0.88)",
flex: 1,
justifyContent: "center",
borderBottomWidth: 2,
borderBottomColor: "#47315a",
},
content: {
backgroundColor: "white",
alignItems: "center",
height: Screen.height() - 450.0,
width: Screen.width() - 50.0,
padding: 10,
borderBottomWidth: 2,
borderBottomColor: "#47315a",
},
header: {
alignItems: "center",
paddingBottom: 10,
justifyContent: "center",
color: "#0B1219",
fontFamily: Fonts.Knockout31JuniorMiddleWeight,
fontSize: 26.0,
borderBottomWidth: 5,
borderBottomColor: "#47315a",
fontWeight: '300',
},
});
const PlaceOrder = () => {
return (
<View style={[styles.container]}>
<View style={[styles.content]}>
<Text style={styles.header}>
HEADER TEXT
</Text>
<Text>dzfaksjads fahksl</Text>
<Text>
We'll start preparing your blah when you blah blah
</Text>
</View>
</View>
);
};
export default PlaceOrder;
但是,bottomBorderWidth和bottomBorderColor都没有工作。
当我将其更改为使用borderWidth
时,它可以正常工作,但我只希望底部有边框:
的package.json:
{
"name": "Indigo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"lodash": "^4.13.1",
"react": "^15.1.0",
"react-native": "^0.27.1",
"react-native-apple-pay": "0.0.0",
"react-native-button": "^1.7.1",
"react-native-code-push": "^1.11.0-beta",
"react-native-loading-spinner-overlay": "^0.3.0",
"react-native-modalbox": "^1.3.8",
"react-native-navigation": "^1.0.2",
"react-native-paged-scroll-view": "^2.0.1",
"react-native-progress": "^3.0.1",
"react-redux": "latest",
"redux": "^3.0.0",
"underscore": "^1.8.3"
},
"devDependencies": {
"eslint": "latest",
"eslint-config-airbnb": "latest",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "latest",
"eslint-plugin-react": "latest"
}
}
答案 0 :(得分:2)
只需用Text
包裹View
节点,并在View
上添加边框底部。
contentWrapper: {
borderBottomWidth: 5,
borderBottomColor: "#47315a"
}