我如何在React native中剪切部分视图

问题描述 投票:3回答:1

我正在使用React Native开发一个应用程序。在App菜单中,我们围绕每个按钮都有一个半圈视图,我不知道如何实现它。

第二个问题是阴影。我使用elevation属性。几乎每个地方都可以,但不是这里。

UI Image

这就是我可以创造enter image description here

任何想法如何实现这一点?

react-native
1个回答
1
投票

实现此类设计的方法之一是使用绝对位置和高程。

这是我用来测试它的代码。它可能会帮助你了解一下。

零件

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

class App extends Component<Props> {
  render() {
    return (
      <View style={styles.backgroundContainer}>
        <View style={styles.appMenu}>
          <View style={styles.curve} />

          <View style={styles.iconContainer}>
            <View style={[styles.iconWrapper, styles.icon1]}>
              <View style={styles.icon}>
                <Text style={styles.text}>i-1</Text>
              </View>
            </View>
            <View style={[styles.iconWrapper, styles.icon2]}>
              <View style={styles.icon}>
                <Text style={styles.text}>i-2</Text>
              </View>
            </View>
            <View style={[styles.iconWrapper, styles.icon3]}>
              <View style={styles.icon}>
                <Text style={styles.text}>i-3</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

相应的风格

import { StyleSheet, Dimensions } from 'react-native';

const window = Dimensions.get('window');
const { width, height } = window;

const styles = StyleSheet.create({
    backgroundContainer: {
      flex: 1,
      alignItems: 'stretch',
      justifyContent: 'center',
      backgroundColor: 'black',
    },

    appMenu: {
      height: 300,
      width: width,
      justifyContent: 'flex-end',
      backgroundColor: '#f5f5f5',
      overflow: 'hidden',
    },

    curve: {
      position: 'absolute',
      left: - width * 0.5,
      bottom: - width * 1.5,
      height: width * 2,
      width: width * 2,
      borderTopLeftRadius: width ,
      borderTopRightRadius: width,
      backgroundColor: 'white',
      elevation: 40,
    },

    iconContainer: {
      flexDirection: 'row',
      elevation: 40,
      position: 'absolute',
      bottom: 0,
      height: 300,
      width: width,
      justifyContent: 'space-around',
    },

    iconWrapper: {
      width: 74,
      height: 74,
      borderRadius: 37,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#f5f5f5',
      overflow: 'hidden',
    },
    icon: {
      width: 60,
      height: 60,
      borderRadius: 30,
      elevation: 12,
      backgroundColor: 'white',
      justifyContent: 'center',
      alignItems: 'center',
    },
    icon1: {
      marginTop: 85,
    },
    icon2: {
      marginTop: 60,
    },
    icon3: {
      marginTop: 85,
    },
    text: {
      color: '#414141',
      fontSize: 20,
      fontWeight: 'bold',
      textAlign: 'center',
    }
});

希望能帮助到你。

© www.soinside.com 2019 - 2024. All rights reserved.