React Native 上的背景颜色曲线答案

【问题标题】：Curve of backgroundcolor on React NativeReact Native 上的背景颜色曲线
【发布时间】：2021-06-18 19:25:09
【问题描述】：

我在如何使我的背景颜色在顶部弯曲（标题部分）时遇到问题，这是我的设计

我的目标是在标题部分上设计这种曲线

这是我的代码

<View style={{backgroundColor: "#BF3EFF", height: "20%", width: "100%",
     borderbbottom: "50px"}}>

【问题讨论】：

borderbbottom 不是属性。你有正确的想法。你需要borderBottom 才能像这样工作
是的。思南是对的。 borderBottom 是正确的语法。另一种更好的方法是使用 svg。试试这个。

标签： css reactjs visual-studio react-native react-native-android

【解决方案1】：

这是实现此效果的一种方法：Expo Snack

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, Image } from 'react-native';
import Constants from 'expo-constants';
const screen = Dimensions.get('screen');
export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.banner}>
        <View style={styles.profile}>
          <Image
            source={{ uri: 'https://i.stack.imgur.com/SXxvF.jpg' }}
            style={{width: 100, height: 100, overflow: "hidden"}}
          />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    alignItems: 'center',
  },
  banner: {
    backgroundColor: '#BF3EFF',
    height: screen.width * 2,
    width: screen.width * 2,
    borderWidth: 5,
    borderColor: 'orange',
    borderRadius: screen.width,
    position: 'absolute',
    bottom: screen.height - screen.height*0.3,
    alignItems: 'center',
  },
  profile: {
    width: 100,
    height: 100,
    backgroundColor: 'pink',
    position: 'absolute',
    bottom: -50,
    borderRadius: 50,
    borderWidth: 2,
    borderColor: 'white',
    overflow: "hidden"
  },
});

【讨论】：