Question

我有这个头像组件，我想在另一个屏幕上调整它的大小，但是没有运气头像：

import React from "react";
import {
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  ActivityIndicator,
} from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import * as ImagePicker from "expo-image-picker";
import * as Permissions from "expo-permissions";
import firebase from "firebase";

export default class Avatar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      image: "https://reactnative.dev/img/tiny_logo.png",
    };
  }

  _pickImage = async () => {
    await Permissions.askAsync(Permissions.CAMERA_ROLL);
    console.log("PICKER");
    let pickerResult = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    this._handleImagePicked(pickerResult);
  };

  _handleImagePicked = async (pickerResult) => {
    try {
      this.setState({ uploading: true });
      if (!pickerResult.cancelled) {
        var uploadUrl = await this.uploadImageAsync(pickerResult.uri);
        this.setState({ image: uploadUrl });
      }
    } catch (e) {
      console.log(e);
      alert("Upload failed, sorry :(");
    } finally {
      this.setState({ uploading: false });
    }
  };

  uploadImageAsync = async (uri) => {
    const blob = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onload = function () {
        resolve(xhr.response);
      };
      xhr.onerror = function (e) {
        console.log(e);
        reject(new TypeError("Network request failed"));
      };
      xhr.responseType = "blob";
      xhr.open("GET", uri, true);
      xhr.send(null);
    });

    const ref = firebase.storage().ref().child(this.props.user.uid);
    const snapshot = await ref.put(blob);

    // We're done with the blob, close and release it
    blob.close();

    return await snapshot.ref.getDownloadURL();
  };

  render() {
    let { image } = this.state;
    return (
      <TouchableOpacity style={styles.container} onPress={this._pickImage}>
        {this.state.uploading ? (
          <View style={styles.waiting}>
            <ActivityIndicator></ActivityIndicator>
          </View>
        ) : (
          <Image
            source={{
              uri: image,
            }}
            style={styles.avatar}
          />
        )}
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  avatar: {
    width: 120,
    height: 120,
    borderRadius: 100,
  },
  waiting: {
    width: wp(29),
    height: hp(13.4),
    borderRadius: 100,
  },
});

这是我要在其上调整大小的屏幕：

import React from "react";
import { StyleSheet, Platform, Image, Button, Text, View } from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import firebase from "../../util/firebase";
import Avatar from "../../components/Avatar";

export default class Home extends React.Component {
  state = { currentUser: null };
  handleLogout = () => {
    firebase
      .auth()
      .signOut()
      .then(function () {
        // Sign-out successful.
      })
      .catch(function (error) {
        // An error happened.
      });
  };
  render() {
    const { currentUser } = this.state;
    const { navigation } = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <View style={styles.avater}>
            <Avatar />
          </View>
          <View style={styles.text}></View>
          <View style={styles.icon}></View>
        </View>
        <View style={styles.container}></View>
        <View style={styles.container}></View>
        <View style={styles.container}></View>
        <View style={styles.container}></View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffffff",
  },
  header: {
    height: hp(13.4),
  },
  avatar: {
    height: hp(11.4),
    width: wp(11.4),
  },
  text: {},
  icon: {},
});

我尝试了渲染中的内联样式，但没有用我还尝试过从头像组件中删除体重和身高，但是它也不起作用
我想念什么？

Answer 1

为什么不尝试将样式/高度，宽度作为道具传递给Avatar组件？这样，您可以删除用于为其设置样式的上级View并将样式直接提供给组件。

在Avatar组件中尝试

render() {
  let { image } = this.state;
  const {avatarStyle} = this.props;
  return (
    <TouchableOpacity style={avatarStyle} onPress={this._pickImage}>
      {this.state.uploading ? (
        <View style={styles.waiting}>
          <ActivityIndicator></ActivityIndicator>
        </View>
      ) : (
        <Image
          source={{
            uri: image,
          }}
          style={{flex:1}}
          resizeMode='contain'
        />
      )}
    </TouchableOpacity>
  );
  }

在这里您可能会看到我使用了resizeMode='contain'道具来将图像放入容器中。进一步了解here

以及在任何使用此组件的地方

return (
  <>
    <Avatar avatarStyle={{height: hp(11.4), width: wp(11.4), overflow:'hidden'}}/>
  </>
)

在另一个屏幕上调整组件的大小

1 个答案: