#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 для получения более подробной информации.