Question

我当前正在开发一个react native应用程序，并且在我的登录屏幕上，它具有一个背景，该背景有两个点，组件在该点上改变了曲线。随附的图像可以更好地显示它的外观，然后我可以对其进行解释。我想知道是否有可能在React Native中重新创建此屏幕。我可以使用react-native-svg，但我正在使用expo。

如您所见，屏幕的蓝色背景/组成部分有两条曲线。（这是在Figma中创建的模型，尚未在应用程序中实现）我将如何在react native中进行设计？

Answer 1

要使用SVG，您必须使用react-native-svg。虽然您可以将其安装在任何react-native软件包中，但Expo内置了它。您可以阅读有关react-native-svg here的更多信息。

使用该库非常简单。由于您已经拥有SVG的路径，因此您可以使用Path属性在屏幕上绘制路径。

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, TextInput } from 'react-native';
import { Constants, Svg } from 'expo';

const WIDTH = Dimensions.get('screen').width;

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Svg height={300} width={WIDTH}>
          <Svg.Path
            d="M-17.5 378.5C31.5 32.5 302.5 463 375 89C447.5 -285 375 644 375 644H0C0 644 -66.5 724.5 -17.5 378.5Z" // put your path here
            fill="blue"
            stroke="blue"
          />  
        </Svg>
        <View style={{backgroundColor: 'blue', flex: 1}}>
          <View style={{width: WIDTH - 60, height: 60, backgroundColor:'white', borderRadius: 30, margin: 30, justifyContent: 'center', paddingLeft: 10}}>
              <TextInput
                placeholder='email'
              />
          </View>
        </View>
      </View>
    );
  }
}

您可以看到它在以下小吃https://snack.expo.io/@andypandy/svg-example

中起作用

这就是iPhone X上的样子

Answer 2

嗯，我会用几种不同的方式来做这样的svg（react-native-svg），但是为什么要做那么多的工作，而仅使用背景图像就可以实现。使用ImageBackground（https://facebook.github.io/react-native/docs/imagebackground）并轻松解决此问题。然后将徽标和登录容器添加为子级。让我知道这是否适合您。：）

编辑：您可能还想看看https://github.com/vault-development/react-native-svg-uri。

在React Native组件中创建多个曲线点

2 个答案: