Блог

Главная - Вопросы по программированию - Как я могу изменить размер svg в зависимости от размера моего экрана в React Native?

Как я могу изменить размер svg в зависимости от размера моего экрана в React Native?

#css #reactjs #image #react-native #svg

#css #reactjs #изображение #react-native #svg

Вопрос:

Я создал адаптивную верстку в React Native, поэтому все, что мне нужно сделать, это масштабировать изображение svg в соответствии с моим размером экрана. Как я могу сделать это в React Native, используя react-native-svg?

Комментарии:

1. основная идея состоит в том, чтобы иметь элемент svg с атрибутом viewBox, но без ширины или высоты. Этот элемент 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;