Question

我有以下代码：

<View style={{flexDirection: 'row'}}>
            <Image
              source={require('../assets/profile.png')}
              style={{
                width: 80,
                height: 80,
              }}
            />
            <View style={{flex: 1}}>
              <Input placeholder="Name" />
              <Input placeholder="Surname" />
            </View>
          </View>

现在看起来像这样：

但是问题是图像的宽度和高度是硬编码的值。这就是为什么我要问是否有任何方法可以将图像高度设置为与父视图的高度相同，然后将宽度设置为与高度相同？感谢您的帮助，谢谢！

UPD

这是屏幕的整个代码：

const Profile = () => {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <SafeAreaView style={styles.screenContainer}>
        <View style={styles.inputsContainer}>
          <View style={{flexDirection: 'row'}}>
            <Image
              source={require('../assets/profile.png')}
              style={styles.avatar}
            />
            <View style={{flex: 1}}>
              <Input placeholder="Name" />
              <Input placeholder="Surname" />
            </View>
          </View>

          <Text style={styles.inputDescription}>
            Enter your name and upload profile photo
          </Text>

          <View style={styles.inputBlock}>
            <Input placeholder="Phone number" keyboardType="phone-pad" />
            <Text style={styles.inputDescription}>
              Update your phone number
            </Text>
          </View>

          <View style={styles.inputBlock}>
            <Input
              placeholder="Email"
              keyboardType="email-address"
              style={styles.inputBlock}
            />
            <Text style={styles.inputDescription}>Update your email</Text>
          </View>
        </View>

        <View>
          <ButtonSubmit style={styles.updateButton} title="Update" />
        </View>
      </SafeAreaView>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
  },
  inputsContainer: {
    flex: 1,
    marginVertical: 20,
    marginHorizontal: 20,
  },
  inputDescription: {
    marginTop: 10,
    marginLeft: 10,
    color: 'grey',
  },
  inputBlock: {
    marginTop: 20,
  },
  avatar: {
    width: 80,
    height: 80,
  },
  updateButton: {
    marginBottom: 20,
    marginHorizontal: 60,
  },
});

Answer 1

您也可以在flex: 1组件上使用<Image>来执行此操作。理论上，<Image>和<View>将具有相同的高度。然后，您只需要使用<Image>或width来调整flex-basis的宽度即可。

如果这不起作用，请提供示例代码和框

如何设置图像高度匹配父和宽度与高度相同？

1 个答案: