文章/答案/技术大牛

发布

社区首页 >问答首页 >无法在react本机中呈现HTML

问无法在react本机中呈现HTML
EN

Stack Overflow用户

提问于 2020-09-14 13:57:30

回答 3查看 1.3K关注 0票数 0

我想在react native中运行这个组件

<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />

目前我使用的是react-native-render-html包

也是这样做的

import React from "react";
import { View, Text } from "react-native";
import HTML from "react-native-render-html";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";

const PhoneAuth = () => {
    const uiConfig = {
        signInFlow: "popup",
        signInOptions: [
            {
                provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
                recaptchaParameters: {
                    type: "image",
                    size: "invisible",
                    badge: "bottomleft",
                },

                defaultCountry: "+91",
                whitelistedCountries: ["IN", "+91"],
            },
        ],
        // callbacks: {
        //  signInSuccessWithAuthResult: function (authResult) {
        //      var user = authResult.user;
        //      const data = { phone: user.phoneNumber };
        //      props.setPhoneNumber(data);
        //  },
        // },
    };

    const htmlContent =  
        `<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />`
    
    return (
        <View>
            <HTML  html={htmlContent} />
        </View>
    );
};
export default PhoneAuth;

但是，因为HTML内容是一个字符串，所以它没有选择变量，所以我得到一个空白屏幕。

reactjs

react-native

回答 3

Stack Overflow用户

发布于 2020-09-14 14:13:39

如果您正在创建自定义HTML标记或元素，则必须告诉渲染器执行此操作，例如：

const content = `<bluecircle></bluecircle>`;
...
 
renderers: {
    bluecircle: () => <View style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: 'blue' }} />
}

您可以尝试执行以下操作

import HTML from 'react-native-render-html'

...

render() {
    // The html you want to render
    const html = `
        <div>
        </div>
    `

    const styles = {}

    const renderers = {
        StyledFirebaseAuth: (htmlAttribs, children, passProps) => {
            return (
        <StyledFirebaseAuth
          {...passProps} />)
        }
    }

    return (
        <HTML
            // Required. The html snippet you want to render as a string
            html={html}

            // The styles to supply for each html tag. Default styles
            // are already pre-provided in HTMLStyles.js. The additional
            // styles that you provide will be merged over these, so if
            // you need some funky red background on your h1, just set
            // the background
            htmlStyles={styles}

            // Renderers to use for rendering specific HTML elements.
            // Default renderers are pre-provided in HTMLRenderers.js.
            renderers={renderers}
    )
}

请参阅docs

票数 1

Stack Overflow用户

发布于 2020-09-14 14:09:40

将样式设置为view flex: 1，如示例所示

<ScrollView style={{ flex: 1 }}>
   <HTML
     html={htmlContent}
     imagesMaxWidth={Dimensions.get("window").width}
    />
</ScrollView>

票数 0

Stack Overflow用户

发布于 2020-09-14 14:15:06

您可以使用WebView来实现此目的。不需要使用任何其他库。

<WebView
    originWhitelist={['*']}
    source={{ html: htmlContent }}   
/>

有关更多详细信息，请参阅API reference。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63878800

复制

相似问题

问无法在react本机中呈现HTML
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在react本机中呈现HTMLEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在react本机中呈现HTML
EN