react-native - React Native 应用程序具有相同的代码，但在 iOS 和 Android 中结果不同

Question

我是 React 新手，正在 Udemy 学习有关 React Native 的类(class)。我遇到了一个样式问题，它使用相同的代码和 StyleSheet 属性，即 Text 中的 borderWith，它在 Android 和 iOS 中看起来不同。

当我向我的文本组件添加一个粗的“borderWith”时，在 iOS 中，文本会自动从边框中获取一点边距，但 Android 会将边框与文本混合在一起。我看到一个解决方案，它使用平台模块或文件扩展名，但我想知道是否可以避免这种情况，并使我的大部分代码与这两种设备类似。

const BoxScreen = () => {
    return (
        <View style={styles.viewStyle}>
            <Text style={styles.textStyle}>Box screen</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    viewStyle: {
        borderWidth: 3,
        borderColor: 'black',
    },
    textStyle: {
        borderWidth: 10,
        borderColor: 'red',
        // marginVertical: 20,
        marginHorizontal: 20,
    }
}); 

iOS 中的结果:

Android 中的结果:

Answer 1

有趣，我以前从未注意到过。
那是因为 margin !
在 ios 中，元素的总高度和宽度计算为边框、填充和元素内部高度的总和，因此如果给它一个边距，它会插入边框和填充，就像边框增长到 <强>跳出框框。
在 Android 中，外部高度呈现为内部高度。就像盒子内部生长的边框。
因此，要解决此问题，您应该调整框中心的文本，以在两个平台上获得所需的结果:

class App extends Component {
  render () {
    return(
        <View style={styles.box}>
          <Text style={styles.title}> Box Screen</Text>
        </View>
    );
  }
}

const styles={
  title : {
    flex : 1,
    justifyContent : 'center',
    borderWidth : 10,
    borderColor : 'red',
    margin: 20,
    padding: 20,
  },
  box : {
    borderWidth : 3,
    borderColor : 'black',
  },
}