React Native 让您仅仅只使用JavaScript来构建移动应用程序。它的设计思想与React保持一致,让您可以通过声明组件以构建丰富的移动应用UI。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class WhyReactNativeIsSoGreat extends Component {
render() {
return (
<View>
<Text>
If you like React on the web, you'll like React Native.
</Text>
<Text>
You just use native components like 'View' and 'Text',
instead of web components like 'div' and 'span'.
</Text>
</View>
);
}
}
使用React Native,您构建的是一个真正的移动应用程序,而不是“移动Web App”,“HTML5 APP”或“混合APP”。这与使用 Objective-C 或 Java 构建的应用程序并无区别。React Native使用与原生iOS和Android应用程序相同的基本UI模块。您只需使用JavaScript和React将这些模块组合在一起即可。
import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';
class AwkwardScrollingImageWithText extends Component {
render() {
return (
<ScrollView>
<Image
source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}
style={{width: 320, height:180}}
/>
<Text>
On iOS, a React Native ScrollView uses a native UIScrollView.
On Android, it uses a native ScrollView.
On iOS, a React Native Image uses a native UIImageView.
On Android, it uses a native ImageView.
React Native wraps the fundamental native components, giving you
the performance of a native app, plus the clean design of React.
</Text>
</ScrollView>
);
}
}
React Native可以让您更快地构建应用程序,无需花费时间重新编译,借助 HotReloading,可以立即重新加载预览您的应用程序。您甚至可以在保留应用程序状态的同时运行更新的代码。请试一试 - 这是一种神奇的体验。
React Native 能与使用 Objective-C,Java 或 Swift 编写的原生组件顺利组合。如果您需要优化应用程序的某些方面,则可以简单地使用原生代码替换它。在React Native中构建应用程序的一部分并直接使用原生代码也很容易 - 请参考Facebook的相关APP。
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { TheGreatestComponentInTheWorld } from './your-native-code';
class SomethingFast extends Component {
render() {
return (
<View>
<TheGreatestComponentInTheWorld />
<Text>
TheGreatestComponentInTheWorld could use native Objective-C,
Java, or Swift - the product development process is the same.
</Text>
</View>
);
}
}