reactjs - React Native SVG 扩展以填充容器

Question

该图标是使用 react-native-svg 的 SVG。我需要它来保持纵横比并扩展以填充父容器。我该怎么办？

<View style={styles.container}>
      <TouchableOpacity style={styles.closeContainer} onPress={onClose}>
        <IconClose style={styles.closeIcon} />
      </TouchableOpacity>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  closeContainer: {
    paddingHorizontal: 26,
  },
  closeIcon: {
    flex: 1,
  },
})

标签： reactjsreact-native

Answer 1

您可以在父级和图标上使用 aspectRatio 属性。就像是

<View style={styles.container}>
      <TouchableOpacity style={styles.closeContainer} onPress={onClose}>
        <IconClose style={styles.closeIcon} />
      </TouchableOpacity>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  closeContainer: {
    paddingHorizontal: 26,
    aspectRatio: 375 / 200,
  },
  closeIcon: {
    flex: 1,
    aspectRatio: 375 / 200,
  },
})