css 我正面临着从侧面到内部React本土观点的问题,

vwhgwdsa 于 4个月前发布在 React

关注(0)|答案(2)|浏览(76)

我目前正在进行一个设计项目，在实现特定的曲线效果方面面临挑战。我附上了两张图片供参考：
The Desired Design:
My Current Progress:的
正如你所看到的，我已经成功地创建了一个基本的结构，但我很难从左侧向内弯曲视图的中心，如第一张图所示。我尝试了各种方法，但似乎都没有产生预期的效果。

import {Image, StyleSheet, Text, View} from 'react-native';
    import React from 'react';

    const ProfieTopCard = () => {
        return (
        <View
          style={{
           flexDirection: 'row',
           backgroundColor: 'green',
           height: '45%',
           justifyContent: 'center',
           alignItems: 'center',
           overflow: 'hidden',
           }}>
             <View
            style={{
            flexDirection: 'column',
              width: '25%',
             height: '100%',
             justifyContent: 'center',
             alignItems: 'center',
                //   backgroundColor: 'red',
             }}>
            <Image
             source={require('../../assets/test.png')}
              resizeMode="stretch"
              style={{height: '85%', width: '85%', borderRadius: 50}}
               />      
                  </View>
                 <View
                  style={{
                    flexDirection: 'column',
                      backgroundColor: '#fff',
                   borderTopRightRadius: 30,
                   borderBottomRightRadius: 30,

          width: '70%',
          height: '85%',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <View
          style={{
            flexDirection: 'row',
            height: '100%',
            width: '100%',
            // backgroundColor: 'red',
          }}>
          <View
            style={{
              flexDirection: 'column',
              width: '80%',
              justifyContent: 'center',
            }}>
            <Text>hello</Text>
          </View>
          <View
            style={{
              flexDirection: 'column',
              width: '20%',
              justifyContent: 'center',
            }}>
            <Text>hello</Text>
          </View>
        </View>
      </View>
    </View>
  );
};

export default ProfieTopCard;

const styles = StyleSheet.create({});`

字符串

css

来源：https://stackoverflow.com/questions/77716049/i-am-facing-issue-in-vurving-the-view-in-react-native-from-a-side-to-inwards

2条答案

按热度按时间

iaqfqrcu1#

你可以这样做

import { Text, View, Image } from 'react-native';

const img = 'https://letsenhance.io/static/66c1b6abf8f7cf44c19185254d7adb0c/28ebd/AiArtBefore.jpg';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center',backgroundColor: '#1E9E64',padding: 8}}>
      <View
        style={{ flexDirection: 'row', backgroundColor: '#fff', alignItems: 'center', marginHorizontal: '2%', borderRadius: 20, height: 60}}>
        <View
          style={{ borderRadius: 150, borderWidth: 10, marginHorizontal: 15, overflow: 'hidden', borderColor:'#1E9E64'}}>
          <Image
            source={{ uri: img }}
            style={{ width: undefined, height: 60, aspectRatio: 1 }}
          />
        </View>
        <View
          style={{ marginHorizontal: '5%'}}>
          <Text>this the title</Text>
          <Text>this the body</Text>
        </View>
      </View>
    </View>
  );
}

字符串
编辑：这是它的外观.