Проблема с размером изображения FlatFeed - PullRequest
Новая
       22

Проблема с размером изображения FlatFeed

0 голосов
/ 01 марта 2020

Я работаю над собственным приложением реагирования, использующим компонент FlatFeed, но изображения, отображаемые в ленте, обрезаются. Как остановить обрезку изображения?

Я публикую действия с изображением на стороне сервера подачи в 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>

Фактическое изображение и то, как оно выглядит в ленте, находится здесь: Вот как FlatFeed отображает изображение

Это пример изображения, которое загружает фид из общедоступной c корзины S3

Как остановить обрезку изображения?

Любая помощь высоко ценится, спасибо.

1 Ответ

0 голосов
/ 03 марта 2020

Возможно, вы захотите добавить resizeMode="contain" в компоненте Image - 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>
...