React native 0.63，如何在Android上的borderRadius中剪切元素？

问题描述

我正在尝试在android设备上使用border-radius裁剪元素，就像在iPhone上一样。 你知道吗？

我在borderRadius上设置了FlatList。

在iOS上，FlatList项被borderRadius剪切，但是在Android上，它们超过了borderRadius。

解决方法

包装json：

{
  "name": "BorderRadius","version": "0.0.1","private": true,"scripts": {
    "android": "react-native run-android","ios": "react-native run-ios","start": "react-native start","test": "jest","lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },"dependencies": {
    "react": "16.13.1","react-native": "0.63.2"
  },"devDependencies": {
    "@babel/core": "^7.8.4","@babel/runtime": "^7.8.4","@react-native-community/eslint-config": "^1.1.0","@types/jest": "^25.2.3","@types/react-native": "^0.63.2","@types/react-test-renderer": "^16.9.2","@typescript-eslint/eslint-plugin": "^2.27.0","@typescript-eslint/parser": "^2.27.0","babel-jest": "^25.1.0","eslint": "^6.5.1","jest": "^25.1.0","metro-react-native-babel-preset": "^0.59.0","react-test-renderer": "16.13.1","typescript": "^3.8.3"
  },"jest": {
    "preset": "react-native","moduleFileExtensions": [
      "ts","tsx","js","jsx","json","node"
    ]
  }
}

我的代码：

import React from 'react';
import {
  SafeAreaView,StyleSheet,View,Text,StatusBar,FlatList,} from 'react-native';

const texts = [
  'Lorem ipsum dolor sit amet','Lorem ipsum dolor sit amet',];

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.background}>
        <View style={styles.spacer} />
        <FlatList
          style={styles.list}
          data={texts}
          renderItem={(obj) => (
            <View style={styles.card} key={obj.index}>
              <Text>{obj.item}</Text>
            </View>
          )}
        />
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  background: {
    backgroundColor: 'blue',flex: 1,},spacer: {
    height: 50,card: {
    paddingHorizontal: 8,paddingVertical: 16,borderRadius: 4,backgroundColor: 'white',borderColor: 'black',borderWidth: 1,marginBottom: 8,list: {
    paddingHorizontal: 25,borderTopLeftRadius: 75,borderTopRightRadius: 75,});

export default App;