加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react-native – React Native:borderBottomWidth无效

发布时间:2020-12-15 20:31:38 所属栏目:百科 来源:网络整理
导读: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,
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,header: {
    alignItems: "center",paddingBottom: 10,color: "#0B1219",fontFamily: Fonts.Knockout31JuniorMiddleWeight,fontSize: 26.0,borderBottomWidth: 5,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不起作用.

enter image description here

当我更改它以使用borderWidth它工作,但我只希望底部有一个边框:

enter image description here

的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"
  }
}

解决方法

只需使用View包装Text节点并向View添加边框底部.

contentWrapper: {
  borderBottomWidth: 5,borderBottomColor: "#47315a"
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读