Python FlatFeed图像大小问题
我正在使用FlatFeed组件开发react本机应用程序,但是在提要中显示的图像正在被裁剪。如何防止图像被裁剪 我使用以下代码在Python中将带有图像的活动发布到提要服务器端:Python FlatFeed图像大小问题,python,react-native,getstream-io,Python,React Native,Getstream Io,我正在使用FlatFeed组件开发react本机应用程序,但是在提要中显示的图像正在被裁剪。如何防止图像被裁剪 我使用以下代码在Python中将带有图像的活动发布到提要服务器端: client = stream.connect(STREAM_API_KEY, STREAM_KEY_SECRET) user_feed = client.feed('timeline', user_id) user_feed.add_activity({'actor': client.users.create_ref
client = stream.connect(STREAM_API_KEY, STREAM_KEY_SECRET)
user_feed = client.feed('timeline', user_id)
user_feed.add_activity({'actor': client.users.create_reference(user_id),'verb': 'post', 'object': message, 'image': front_image_url})
这是FlatFeed的react本机代码:
<StreamApp
apiKey={apiKey}
appId={appId}
token={this.state.token}
>
<FlatFeed
notify
feedGroup="timeline"
options={{
limit: 10,
}}
notify
navigation={this.props.navigation}
Activity={(props) => (
<TouchableOpacity
onPress={() => this._onPressActivity(props.activity)}
>
<Activity
{...props}
Footer={
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<LikeButton reactionKind="heart" {...props} />
</View>
}
/>
</TouchableOpacity>
)}
/>
</StreamApp>
(
这个。_onPressActivity(props.activity)}
>
如何防止图像被裁剪?
非常感谢您的帮助。您可能需要在图像组件中添加resizeMode=“contain”
但要添加此道具,您必须向活动组件提供自己的内容组件。因此,我建议如下(检查代码中的注释):
(
这个。_onPressActivity(props.activity)}
>
{
常数宽度=
props.imageWidth!=null
?道具图像宽度
:尺寸。获取(“窗口”)。宽度;
const{object,image,attachments}=props.activity;
设{text}=props.activity;
const{Card}=道具;
如果(文本===未定义){
如果(对象的类型=='string'){
文本=对象;
}否则{
文本='';
}
}
text=text.trim();
返回(
{布尔值(文本)&&(
{this.renderText(text,props.activity)}
)}
{布尔(图像)&&(
)}
{附件&&
附件.图片&&
附件.images.length>0&&(
)}
{附件&&
附件.og&&
Object.keys(attachments.og).length>0&&
0
?attachments.og.images[0]。image
:null
}
url={attachments.og.url}
og={attachments.og}/>
}
);
}}
/>
)}
/>
太棒了,谢谢Vishtree。这正是我需要的。
<StreamApp
apiKey={apiKey}
appId={appId}
token={this.state.token}
>
<FlatFeed
notify
feedGroup="timeline"
options={{
limit: 10,
}}
notify
navigation={this.props.navigation}
Activity={(props) => (
<TouchableOpacity
onPress={() => this._onPressActivity(props.activity)}
>
<Activity
{...props}
Footer={
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<LikeButton reactionKind="heart" {...props} />
</View>
}
// This is mostly copied from source of default `Content` component
// https://github.com/GetStream/react-native-activity-feed/blob/master/src/components/Activity.js#L193
Content={() => {
const width =
props.imageWidth != null
? props.imageWidth
: Dimensions.get('window').width;
const { object, image, attachments } = props.activity;
let { text } = props.activity;
const { Card } = props;
if (text === undefined) {
if (typeof object === 'string') {
text = object;
} else {
text = '';
}
}
text = text.trim();
return (
<View>
{Boolean(text) && (
<View style={{
paddingBottom: 15,
paddingLeft: 15,
paddingRight: 15,
}}>
<Text>{this.renderText(text, props.activity)}</Text>
</View>
)}
{Boolean(image) && (
<Image
style={{ width, height: width }}
source={{ uri: image }}
// Either `contain` or `stretch`, depending on your requirement
resizeMode="contain"
/>
)}
{attachments &&
attachments.images &&
attachments.images.length > 0 && (
<Image
style={{ width, height: width }}
source={{ uri: attachments.images[0] }}
// Either `contain` or `stretch`, depending on your requirement
resizeMode="contain"
/>
)}
{attachments &&
attachments.og &&
Object.keys(attachments.og).length > 0 &&
<Card
title={attachments.og.title}
description={attachments.og.description}
image={
attachments.og.images && attachments.og.images.length > 0
? attachments.og.images[0].image
: null
}
url={attachments.og.url}
og={attachments.og} />
}
</View>
);
}}
/>
</TouchableOpacity>
)}
/>
</StreamApp>