React Native：Android：边框颜色与 borderRadius 不同

Question

我似乎找不到任何文档来描述 Android 与 iOS 上边框颜色的行为差异。下面的代码在 iOS 上运行良好，但在 Android 上运行不佳。 Android 决定完全忽略蓝色边框。

如果删除 borderRadius，问题就会消失。

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

  export default class test extends Component {
    render() {
      return (
        <View style={styles.container}>
          <View style={[styles.innerContainer, {borderTopColor: 'blue'}]}></View>
        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      padding: 20
    },
    innerContainer: {
      borderRadius: 4,
      borderWidth: 1,
      borderColor: '#111',
      height: 200
    },
  });

  AppRegistry.registerComponent('test', () => test);

Answer 1

The problem goes away if the borderRadius is removed.

是的，there's a bug 在 Android 上，一旦你这样做，你的整个边界就设置好了或消失了。

最好的办法是使用包装视图或不使用半径。

Answer 2

你可以这样做：

<View style={{ borderTopLeftRadius:10, borderTopRightRadius:10 }} />
<View/> //don't use border radius here 
<View style={{ borderBottomLeftRadius:10, borderBottomRightRadius:10 }} />

React Native：Android：边框颜色与 borderRadius 不同

React Native: Android: Different border colors with borderRadius

react-native

react-native-android