ReactNativeでTwitter埋込みの実装をするには。

ReactNative(Expo・typescript)でTwitterの投稿をアプリ上にテキスト埋め込みたいのですが、上手くいきません。

React自体でTwitterの埋め込み対応しているモジュールはあるのですが、ReactNativeでは試した感じどれも使えないみたいです。

また、react-native-render-htmlモジュール
を用いて、Twitter埋込み用のHTMLコードをレンダリングしようとしましたが、ツイート文のみの描画になってしまいます。

何か解決策がありましたら、御指南お願い致します。m(_ _)m
スタイル整形を用いた擬似的な実装でも構いません。
(その際は実際のコードを送って頂けますと幸いです。)

行動規範の内容に同意します

回答1件

私も同じ問題に直面していました。
custom renderersとdomNodeToHTMLStringとWebViewを組み合わせることで解決しました。

domNodeToHTMLStringでblockquoteかつclass twitter-tweetのノードをHTML文字列に変換して、scriptを合体させてWebViewで開きます。
実際には、高さの調整に難があったので、私はWebViewではなくAutoHeightWebViewを使いました。

javascript
1const html = `<p>hogehogehoge<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Fighting systemic barriers to opportunity means redefining business as usual. We&#39;re thrilled to open applications to our Impact Accelerator for Black- and Brown-owned businesses addressing environmental challenges. Learn more about it here: <a href="https://t.co/yEdTYZChBF">https://t.co/yEdTYZChBF</a></p>&mdash; Tim Cook (@tim_cook) <a href="https://twitter.com/tim_cook/status/1356255509494394882?ref_src=twsrc%5Etfw">February 1, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>hogehogehoge</p>`
2
3export default function App() {
4  const content = html;
5  return (
6      <View >
7        <ScrollView contentContainerStyle={styles.scrollContentContainer}>
8          <HTML
9            source={{ html: content }}
10            renderers={{
11              blockquote: (htmlAttribs, children, styles, passProps) => {
12                if (htmlAttribs.class == 'twitter-tweet') {
13                  const JS ='<script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>';
14                  const html = domNodeToHTMLString(passProps.domNode);
15                  const source = html + JS;
16                  return (
17                    <View>
18                      <WebView
19                        scrollEnabled={false}
20                        source={{ html: source }}
21                        javaScriptEnabled={true}
22                      />
23                    </View>
24                  );
25                } else {
26                  return <View style={styles.blockquote}>{children}</View>;
27                }
28              },
29            }}
30          />
31        </ScrollView>
32      </View>
33  );
34}