Question

在我的本机应用程序中，我想将图像的高度设置为弹性高度。我怎样才能做到这一点？目前，我使用高度作为设备 - 高度/ 3.但是当涉及较小的屏幕时，它会产生问题。如何将图像的高度作为弯曲高度来实现？我的代码在5英寸设备中正常工作，但是当涉及到4时，图像会变得一团糟。

render() {
    return (
      <View style={styles.container}>
        <View style={styles.postCommentWrapper}>
          <ScrollView
            ref={view => {
              this.scrollView = view;
            }}
          >
            <Animated.View>
              <PostProfileBar
                profile={this.state.post.author}
                timeAgo={this.state.post.timeAgo}
              />

              <ClickableImage
                source={{ uri: this.state.post.postImage }}
                height={height * (3 / 10)}
                width={width}
                onPress={() => alert("Image Clicked")}
              />
            </Animated.View>

            <CommentFlatList
              data={this.state.data}
              refreshing={this.state.refreshing}
            />
          </ScrollView>
        </View>

        <View
          style={[
            styles.commentInputWrapper,
            { flex: this.state.commentBoxStyles.flex }
          ]}
        >
          <InputWithClickableIcon
            iconName="upload"
            placeholder="Type Comment"
            isFocused={true}
            fontSize={this.state.comment.value.length > 0 ? 16 : 20}
            value={this.state.comment.value}
            multiline={true}
            maxLength={500}
            height={this.state.commentBoxStyles.height}
            borderRadius={this.state.commentBoxStyles.borderRadius}
            onChangeText={value => this.onChangeComment(value)}
            onPress={() => this.uploadComment()}
            invalidInput={styles.invalidInput}
            valid={this.state.comment.valid}
            touched={this.state.comment.touched}
            disabled={!this.state.comment.valid}
          />
        </View>
      </View>
    );
  }

  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;

    return {
      headerTitle: "Comment",
      headerTitleStyle: {
        paddingLeft: "20%",
        paddingRight: "20%"
      },
      headerStyle: {
        paddingRight: 10,
        paddingLeft: 10
      },
      headerLeft: (
        <Icon
          name={"close"}
          size={30}
          onChangeText={this.onChangeText}
          onPress={() => {
            navigation.goBack();
          }}
        />
      )
    };
  };
}

const styles = StyleSheet.create({
  container: {
    borderWidth: 3,
    borderColor: "yellow",
    flex: 1
  },
  postCommentWrapper: {
    borderWidth: 2,
    borderColor: "blue",
    flex: 16,
    marginTop: 10
  },
  // commentListWrapper: {
  //   borderWidth: 2,
  //   borderColor: "green",
  //   flex: 8,
  //   marginTop: 10
  // },
  commentInputWrapper: {
    flex: 2,
    borderWidth: 2,
    borderColor: "purple",
    justifyContent: "flex-end",
    marginTop: 5
  }
});

ClickableImage组件

import React from "react";
import { TouchableOpacity, Image, StyleSheet } from "react-native";

const clickableImage = props => (
  <TouchableOpacity onPress={props.onPress}>
    <Image 
      {...props}
      style={[
        styles.image,
        props.style,
        { height: props.height },
        { width: props.width }
      ]}
    />
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  image: {
    marginTop: 10,
    flexDirection: "row",
    alignItems: "center"
  }
});

export default clickableImage;

Answer 1

由于您已将style props传递给ClickableImage，因此您可以

    <ClickableImage
        source={{ uri: this.state.post.postImage }}
        style={{flex: 1}}
        onPress={() => alert("Image Clicked")}
    />

你还需要将样式传递给TouchableOpacity，以便container内的flex工作

<TouchableOpacity style={props.style} onPress={props.onPress}> //... Pass the relevant styles here

如何将图像的高度设置为弹性高度

1 个答案: