FlatFeed 图像大小问题

Question

我正在开发一个使用 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_reference(user_id),'verb': 'post', 'object': message, 'image': front_image_url})

这是 FlatFeed 的反应本机代码：

<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>

实际图像及其在 Feed 中的样子在这里： This is how the FlatFeed displays the image

This is an example image that the feed is pulling in from a public S3 bucket

如何阻止图片被裁剪？

非常感谢任何帮助，谢谢。

Answer 1

您可能需要在图像组件中添加 resizeMode="contain" - https://github.com/GetStream/react-native-activity-feed/blob/master/src/components/Activity.js#L223。

但要添加此道具，您必须将自己的 Content 组件提供给 Activity 组件。所以我建议如下（检查代码中的注释）：

<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>

FlatFeed 图像大小问题

FlatFeed image size issue

python

react-native

getstream-io