Question

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

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

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

   Try this,

   issue regarding android then you can use Platform.OS ,

   more information to visit,

https://facebook.github.io/react-native/docs/platform-specific-code

   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: Platform.OS === 'ios' ? 20 : 30,
            padding:Platform.OS === 'ios' ? 0 : 5

        }
    });

Answer 2

有趣的是我之前从未注意到。
那是因为保证金！
在 ios 中，元素的总高度和宽度由边框，填充和元素内部高度的总和计算得出，因此，如果给它一个边距，它将推动边框和填充，就像边框在增长到<盒中的strong>外部。
在 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',
  },
}

Answer 3

希望这行得通！

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

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

建议使用自适应样式，请在此处检查： Link

Answer 4

不要在文本元素上使用边距，而在视图元素上使用填充。

通常，您使用边距在兄弟姐妹之间进行间隔，使用填充对父母和孩子进行间隔。

Answer 5

以文本样式尝试

    SELECT a.banchcode, 
       a.branchname, 
       b.regionname, 
       b.directoratename, 
       SUM(CASE
               WHEN a.caption IN('BUSINESS  LOAN', 'OVERDRAFTS', 'OVERDRAFTS', 'RETAIL PRODUCT LOAN', 
            'RETAIL PRODUCT LOAN', 'TERM LOANS', 'CBN/BOILOAN', 'LEASES', 'CREDIT CARD', 'LEASES', 'CREDIT CARD', 'CREDIT CARD - FCY',
            'ASSET ACQUISITION SCHEME', 'TERM LOANS - FCY', 'DEVICE LOAN SCHEME')
               THEN a.previousmonthaveragevolume
               ELSE 0
           END) June_Loan
FROM bs_report a
     LEFT JOIN mpr_team_structure b ON a.banchcode = b.branch_code
WHERE a.period = '7'
GROUP BY a.banchcode, 
         a.branchname, 
         b.regionname, 
         b.directoratename;

在iOS和Android中使用相同的代码对本机应用程序进行反应，但结果不同

5 个答案: