美文网首页
react-native 1px 解决方案

react-native 1px 解决方案

作者: 暴躁程序员 | 来源:发表于2023-11-16 10:03 被阅读0次

方式一:通过 PixelRatio.get() 获取到手机的像素比,设置边框宽度时除以像素比

import * as React from 'react';
import {View, Text, StyleSheet, PixelRatio} from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <View style={styles.border1}>
        <Text>边框1像素解决方案</Text>
      </View>
      <View style={styles.footer}>
        <Text style={[styles.footerText, styles.Divider]}>底部分割线</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  // 1 像素边框
  border1: {
    margin: 20,
    height: 200,
    borderStyle: 'solid',
    borderColor: '#ccc',
    borderWidth: 1 / PixelRatio.get(),
  },
  footer: {
    height: 50,
    margin: 20,
  },
  footerText: {
    height: 50,
    textAlign: 'center',
    textAlignVertical: 'center',
    includeFontPadding: false,
  },
  // 1 像素分割线
  Divider: {
    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: '#ccc',
  },
});
export default App;

方式二:通过 StyleSheet.hairlineWidth 定义宽度

import * as React from 'react';
import {View, Text, StyleSheet} from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <View style={styles.border1}>
        <Text>边框1像素解决方案</Text>
      </View>
      <View style={styles.footer}>
        <Text style={[styles.footerText, styles.Divider]}>底部分割线</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  // 1 像素边框
  border1: {
    margin: 20,
    height: 200,
    borderStyle: 'solid',
    borderColor: '#ccc',
    borderWidth: StyleSheet.hairlineWidth,
  },
  footer: {
    height: 50,
    margin: 20,
  },
  footerText: {
    height: 50,
    textAlign: 'center',
    textAlignVertical: 'center',
    includeFontPadding: false,
  },
  // 1 像素分割线
  Divider: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#ccc',
  },
});
export default App;

相关文章

网友评论

      本文标题:react-native 1px 解决方案

      本文链接:https://www.haomeiwen.com/subject/smvewdtx.html