react-native - 拍摄 View 后在 facebook 上分享 - 不在 facebook 上显示图像

Question

我正在尝试拍摄一个 View ，然后在 facebook 上分享它的 View ，但是图像有时不显示。

import Share from 'react-native-share';
import ViewShot from 'react-native-view-shot';

class ShareOptions extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onCapture = uri => {
    const { navigation } = this.props;
    const item = get(navigation.state.params, 'itemInfo', {});
    const appId = get(navigation.state.params, 'appId', '');
    const message = item.title;
    const shareOptions = {
      title: 'Share via',
      message: `${message} ${item.link}`,
      social: Share.Social[appId],
      url: uri,
    };
    if (appId === 'MESSENGER') {
      Share.open(shareOptions);
    } else if (appId === 'TELEGRAM') {
      Share.open(shareOptions);
    } else if (appId === 'WHATSAPP') {
      Linking.openURL(`whatsapp://send?text=${`${message} ${item.link}`}`);
    } else if (appId === 'MORE') {
      Share.open(shareOptions);
    } else {
      Share.shareSingle(shareOptions);
    }
  };

  render() {
    const { navigation } = this.props;
    const item = get(navigation.state.params, 'itemInfo', {});
    return (
      <View bg="white">
        <ViewShot
          style={{ backgroundColor: '#fff' }}
          onCapture={this.onCapture}
          captureMode="mount"
          options={{ format: 'png' }}
          f={1}>
          <View
            w={Environment.screenWidth - 40}
            h={Environment.screenHeight - 150}
            bg="white"
            br={5}
            e={8}
            m={20}
            jc="space-between">
            <View>
              {get(item, 'url', '') !== '' && (
                <View>
                  <FastImage
                    style={{
                      height: 150,
                      resizeMode: 'cover',
                      borderRadius: 0,
                    }}
                    source={{
                      uri: item.url,
                      priority: FastImage.priority.normal,
                    }}
                    resizeMode={FastImage.resizeMode.cover}
                  />
                </View>
              )}
              <View ph={10} pt={get(item, 'url', '') !== '' ? 12 : 2}>
                <Text fs={14} lh={19} c={Color.black} sb numberOfLines={2}>
                  {item.title}
                </Text>
                <Text
                  fs={12}
                  lh={17}
                  c={Color.black}
                  numberOfLines={get(item, 'url', '') !== '' ? 8 : 16}
                  mt={5}>
                  {item.description}
                </Text>
              </View>
            </View>
            <View ph={11} pt={25} pb={11.5} row ai="center">
              <Icon
                type="MaterialCommunityIcons"
                name="newspaper"
                size={22}
                color={Color.light}
              />
              <Text ml={8} c={Color.light} fs={14}>
                {item.author}
              </Text>
            </View>
            <View
              h={2}
              w={Environment.screenWidth - 60}
              bg={Color.grey65}
              as="center"
              mv={2}
            />
            <View row ai="center" ph={11} pt={10} pb={15}>
              <Image
                style={{
                  resizeMode: 'contain',
                  height: 18,
                  width: 64,
                }}
                source={require('../../../assets/images/flockby-name.png')}
              />
              <Text ph={8} fs={12}>
                Celebrate wildlife - Chat, meet, share!
              </Text>
            </View>
          </View>
        </ViewShot>
        <View m={20}>
          <Text c={Color.light} fs={12} br={5} e={3} m={4}>
            Read story at {item.link}
          </Text>
        </View>
      </View>
    );
  }
}

export default ShareOptions;

编辑 : 所以它第一次显示图像但是连续几次它不起作用。

所以我实现了下面的它来等待我的图像上传。

    <FastImage
                onLoad={this.onImageLoad}
                style={{
                  height: 150,
                  resizeMode: 'cover',
                  borderRadius: 0,
                }}
                source={{
                  uri: item.url,
                  priority: FastImage.priority.normal,
                }}
                resizeMode={FastImage.resizeMode.cover}
              />

但是，有时我没有从后端获取图像 url。



请帮助新手 react 原生

Answer 1

自己修好了。

            <FastImage
                onLoad={this.onImageLoad}
                style={{
                  height: 150,
                  resizeMode: 'cover',
                  borderTopLeftRadius: 5,
                  borderTopRightRadius: 5,
                }}
                source={{
                  uri: item.url,
                  priority: FastImage.priority.normal,
                }}
                resizeMode={FastImage.resizeMode.cover}
              />

我现在在分享帖子 onImageLoad 它解决了我的问题。