react-native - 在另一个屏幕上调整组件大小
问题描述
我有这个 Avatar 组件,我正在尝试在另一个屏幕上调整它的大小,但没有运气 Avatar:
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: {},
});
我在渲染器中尝试了内联样式,但没有成功
解决方案
为什么不尝试将样式/高度、宽度作为道具传递给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'
道具将图像放入容器中。在此处阅读有关它的更多信息
无论你在哪里使用这个组件
return (
<>
<Avatar avatarStyle={{height: hp(11.4), width: wp(11.4), overflow:'hidden'}}/>
</>
)
推荐阅读
- c# - 如何在实体框架中使用两个模型类进行连接
- google-apps-script - 使用中间有空格的getNotes?
- c - SIG_IGN 关于 SIGFPE、SIGILL、SIGSEGV 的未定义行为规范是否多余?
- mysql - 计算按国家分组的一列中的比率
- c++ - 用大 O 表示法表示的 mandelbrot 集的时间复杂度
- python - 捕获停止执行我的 Python 脚本的错误
- amazon-web-services - Amazon CloudWatch 日志组的后端存储
- vba - 根据 ObjectList 中的 2 列删除重复项
- apache-spark - 如何在pyspark数据框中的groupby之后进行条件聚合?
- angular - 错误消息服务、子组件和父组件