React native 在iOS和Android中使用相同代码但结果不同的React本机应用程序

我是React新手，我正在上一门关于React母语的课程。 我遇到了一个样式问题，它使用相同的代码和样式表属性，文本中的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,
    }
}); 

constboxscreen=（）=>{
返回(
箱式屏风
);
};
const styles=StyleSheet.create({
视图样式：{
边框宽度：3，
边框颜色：“黑色”，
},
文本样式：{
边框宽度：10，
边框颜色：“红色”，
//澳门时间:20,，
marginHorizontal:20，
}
}); 

在iOS中的结果：

Android的结果：

希望这能奏效

constboxscreen=（）=>{
返回(
箱式屏风
);
};
const styles=StyleSheet.create({
视图样式：{
边框宽度：3，
边框颜色：“黑色”，
},
文本样式：{
边框宽度：10，
边框颜色：“红色”，
水平方向：20，
}
}); 希望这能奏效


constboxscreen=（）=>{
返回(
箱式屏风
);
};
const styles=StyleSheet.create({
视图样式：{
边框宽度：3，
边框颜色：“黑色”，
},
文本样式：{
边框宽度：10，
边框颜色：“红色”，
水平方向：20，
}
}); 不要在文本元素上使用边距，在视图元素上使用填充

通常，您使用边距在同级之间隔开，使用填充来隔开父级和子级。
不要在文本元素上使用边距，请在视图元素上使用填充

   Try this,

   issue regarding android then you can use Platform.OS ,

   more information to visit,

通常，您使用边距来分隔兄弟姐妹，使用填充来分隔父级和子级

   Try this,

   issue regarding android then you can use Platform.OS ,

   more information to visit,


constboxscreen=（）=>{
返回(
箱式屏风
);
};
const styles=StyleSheet.create({
视图样式：{
边框宽度：3，
边框颜色：“黑色”，
},
文本样式：{
边框宽度：10，
边框颜色：“红色”，
//澳门时间:20,，
marginHorizontal:Platform.OS=='ios'？20:30，
填充：Platform.OS=='ios'？0:5
}
}); 


constboxscreen=（）=>{
返回(
箱式屏风
);
};
const styles=StyleSheet.create({
视图样式：{
边框宽度：3，
边框颜色：“黑色”，
},
文本样式：{
边框宽度：10，
边框颜色：“红色”，
//澳门时间:20,，
marginHorizontal:Platform.OS=='ios'？20:30，
填充：Platform.OS=='ios'？0:5
}
}); 
试试文本样式

 textAlign: 'center'

用文本样式试试这个

 textAlign: 'center'

有趣的是，我以前从未注意到这一点。

那是因为利润

在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',
  },
}

类应用程序扩展组件{
渲染（）{
返回(
箱式屏风
);
}
}
常量样式={
标题：{
弹性：1，
为内容辩护：“中心”，
边框宽度：10，
边框颜色：“红色”，
差额：20，
填充：20，
},
方框：{
边框宽度：3，
边框颜色：“黑色”，
},
}
有趣，我以前从未注意到。

那是因为利润

在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',
  },
}

类应用程序扩展组件{
渲染（）{
返回(
箱式屏风
);
}
}
常量样式={
标题：{
弹性：1，
为内容辩护：“中心”，
边框宽度：10，
边框颜色：“红色”，
差额：20，
填充：20，
},
方框：{
边框宽度：3，
边框颜色：“黑色”，
},
}
非常感谢您提供的信息，但在本例中，问题出在文本内部，正如您所看到的，在我的文本中，我定义了一个边框，文本内容与此边框混合，因此我认为视图在这里没有任何作用。@AlonBarDavid我在中发布了一个类似的问题，如果可以的话，请看一看。即使边距和边框在包含上，并且没有样式，您也会看到这种行为。非常感谢您提供的信息，但在这种情况下，问题在于文本内部，正如您所看到的，在我的文本中，我定义了一个边框，并且文本内容与此边框混合，因此，我认为这里的视图与此无关。@AlonBarDavid我在中发布了一个类似的问题，如果可以，请看一看。你明白了吗