logo标签列表

在 React Native 标记中使用 <div> 标记是否可行？

react-native
6

现在我正在使用Firebase JS SDK进行电话验证，我遵循了web method。

这是我的代码：

  handleClick = () => {
    this.state.verify_otp = "flex";
    this.state.register = "none";
    this.recaptcha = new firebase.auth.RecaptchaVerifier("recaptcha1");
    this.number = this.state.phone;
  };

.

<View
    style={{
        alignItems: "center",
        justifyContent: "center",
        flex: 1,
        display: this.state.captcha,
    }}
>
    <div>
        <div id="recaptcha1"></div>
    </div>
</View>

在React Native代码中使用 <img>标签是可能的吗？
5个回答
3
不，原生的React Native不支持直接使用HTML，因为它不是一个Web框架。
如果想在React Native中渲染HTML，请参见在React Native中渲染HTML。
1
1
不，你不能在React Native组件中使用
元素，因为React Native没有DOM。
1
您可以使用react-native-render-html实现以下效果。(如果无法工作，必须安装react-native-webview)。
import * as React from 'react';
import { Text, View, StyleSheet,ScrollView, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import HTML from 'react-native-render-html';


const htmlContent = `
    <h1>This HTML snippet is Using react-native-render-html !</h1>
    <h2>Trying many tag to render html</h2>
    <img src="https://i.imgur.com/fJ71V9b.jpg" />
    <div>Here is what you want to add!!!!!<div>`
    ;
export default function App() {
  return (
    <View style={styles.container}>
     <ScrollView style={{ flex: 1 }}>
            <HTML html={htmlContent} imagesMaxWidth={Dimensions.get('window').width} />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  } 
});

在 Snack 上的代码示例

1
很遗憾这是不可能的。Div是一个可以被浏览器读取的HTML元素。对于移动应用程序，它是View。不过，你可以构建自己的div。
class Div extends Component {  //or Class Span extends Component

  static propTypes = {
      style : PropTypes.obj
      onClick : PropTypes.func   // ...
  }

  render (){
        return (
        <View>
        
    /* whatever is needed to pass everything through  ... */
  
       </View>
 )    }

}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接