Question

我正在用React Native开发一个应用程序。在“应用”菜单中，每个按钮都有一个半圆的视图，我不知道该如何实现。

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

这是我可以创造的

任何想法如何实现这一目标？

Answer 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',
    }
});

希望有帮助。

我如何在React Native中剪切视图的一部分

1 个答案: