出于好奇我开始学习React,并想知道React和React Native的区别-尽管使用Google找不到令人满意的答案。React和React Native似乎具有相同的格式。它们是否具有完全不同的语法?
出于好奇我开始学习React,并想知道React和React Native的区别-尽管使用Google找不到令人满意的答案。React和React Native似乎具有相同的格式。它们是否具有完全不同的语法?
一个简单的比较应该是
ReactJs(React JavaScript库)
return(
<div>
<p>Hello World</p>
</div>
)
React Native
return(
<View>
<Text>Hello World</Text>
</View>
)
React Native没有像div
、p
、h1
等Html元素,相反它有适合移动设备的组件。
更多细节请参见https://reactnative.dev/docs/components-and-apis
这是一种混合工具,可用于开发适用于iOS和Android操作系统的应用程序。您不必重复编写两次代码。 它使用本地组件和React技术。 它还提供了访问服务器 (Firebase) 的权限。 如需进一步帮助,请查看以下链接: https://reactnative.dev/ https://nativebase.io/
React Native是一个使用React构建Android和iOS应用的框架。而React是一种用于构建精美网站的Web框架。
React本质上是由Facebook自主开发的。它实际上在2013年进入了技术世界。React是一个JS库,而不是框架。React最显著的一点是能够同时创建前端和后端。
React Native只是一个移动开发平台。在React Native之前,您需要了解Java(适用于Android)或Objective-C(适用于iPhone和iPad)才能创建本地React应用程序:简而言之,React是Webdev技术,而React-Native则是Mobildev技术。
React 用于在浏览器中工作的 Web 应用程序。 React Native 用于在移动应用程序中工作的 Android 和 IOS 应用程序。
React-Native 是一个跨平台的技术,使用 reactjs 来构建应用程序,可以在所有平台上使用相同的代码,例如(iOS、Android、Web、Windows、Mac、Linux)。
实现的区别在于,reactjs 使用 HTML 标签,而 react-native 使用特定的组件。
React Native 代码示例
import { AppRegistry } from 'react-native';
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
class Clock extends Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.sectionTitle}>Hello, world!</Text>
<Text style={styles.sectionDescription}>It is {this.state.date.toLocaleTimeString()}.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
justifyContent: 'center',
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: 'black',
alignSelf: 'center',
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: 'darkgrey',
alignSelf: 'center',
},
});
AppRegistry.registerComponent("clock", () => Clock);
<h1>
和 <h2>
标签。ReactJS使用React-DOM而不是浏览器DOM,而React Native使用虚拟DOM,但两者使用相同的语法。即如果您可以使用ReactJS,则可以使用React Native。因为您在ReactJS中使用的大多数库都可以在React Native中使用,例如您的React Navigation和其他常见库它们共有。
<h1>
、<p>
等的 HTML 组件。而 React Native 则呈现本地应用视图组件,如 <View>
和 <Text>
。 - Ira Herman
<h1>
、<p>
等,而 React Native 则渲染原生应用程序视图组件,例如<View>
、<Text>
、<Image>
、<ScrollView>
,因此除非重新制作/替换所有元素,否则无法直接重用 UI 组件代码。 - Ira Herman