css - 如何根据我在 React Native 中的屏幕大小更改 svg 大小？

Question

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

标签： cssreactjsimagereact-nativesvg

Answer 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;