【问题标题】:How can I change svg size depending on my screen size in React Native?如何根据我在 React Native 中的屏幕大小更改 svg 大小?
【发布时间】:2020-12-29 02:47:31
【问题描述】:

我在 React Native 中创建了自适应布局,所以我要做的就是让我的 svg 图像随屏幕大小缩放。如何在 React Native 中使用 react-native-svg 做到这一点?

【问题讨论】:

  • 主要思想是有一个带有 viewBox 属性但没有宽度或高度的 svg 元素。这个 svg 元素将占用所有可用的宽度。

标签: css reactjs image react-native svg


【解决方案1】:

使用react-native-responsive-screen,您可以使用取决于您的屏幕尺寸的值,如下所示:



import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';

class Login extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.textWrapper}>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  textWrapper: {
    height: hp('70%'), // 70% of height device screen
    width: wp('80%')   // 80% of width device screen
  }
});

export default Login;

【讨论】:

    猜你喜欢
    • 2023-03-11
    • 2021-07-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-04
    • 1970-01-01
    • 2021-09-27
    相关资源
    最近更新 更多