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

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

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

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

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的不同边框颜色

2 个答案: