Блог

Главная - Вопросы по программированию - невозможно отобразить HTML внутри react native

невозможно отобразить HTML внутри react native

#reactjs #react-native

#reactjs #react-native

Вопрос:

Я хочу запустить этот компонент внутри 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 является строкой, оно не выбирает переменные
и я получаю пустой экран.

Ответ №1:

Если вы создаете пользовательский 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}
    )
}

Смотрите документы

Комментарии:

1. @SagarChavan вы предоставили renderers объект HTML ? если это так, это может быть элемент, который не может быть отображен в мобильном представлении, как указано в документах, не все в браузере доступно для отображения в мобильном представлении

2. можете ли вы, пожалуйста, показать в этом коде, как я должен добавлять рендеры

Ответ №2:

установите стиль для просмотра flex: 1, как показано в примере

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

Ответ №3:

Вы можете использовать WebView для этой цели. Нет необходимости использовать какую-либо другую библиотеку.

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

Смотрите ссылку на API для получения более подробной информации.