安装React Native命令行
打开终端或命令提示符并执行以下命令，这将全局安装React Native Cli。 在此之前，您必须使用最新的Node.js软件设置您的机器。
$ sudo npm install -g react-native-cli
注意 ：这只适用于Mac OS，很快它们将针对Linux和Windows发布 创建并启动React Native Project 这里的新命令将处理项目文件。 使用ng服务命令启动应用程序。
$ react-native init MyProject $ cd MyProject
使用的iOS模拟器启动项目
$ react-native run-ios
使用的Android模拟器启动您的
$ react-native run-android
热加载 命令+ D 启用热加载以进行实时开发。
React Native Hot Loading for Development
入门 此项目的英文一个显示博客供稿的页面。 首先，我们将此页面分为3个组件，如页眉，页脚和正文。 创建SRC夹数文件 创建appHeader.js，appBody.js和appFooter.js等组件。
React Native Components文件夹
appHeader.js 标头组件，包含移动应用程序标头。
从 ‘ react ‘ 导入 React，{Component} ; 从 ‘ react-native ‘ 导入 { Text } ; export default class AppHeader extends Component { render （）{ return（ < Text > Header </ Text > ）; } } 模块 .EXPORT = AppHeader ;
appBody.js Body组件，这将解析JSON提要。
从 ‘ react ‘ 导入 React，{Component} ; 从 ‘ react-native ‘ 导入 { Text } ; 导出 默认 类 AppBody 扩展 组件{ render （）{ return（ < Text > Body Content </ Text > ）; } } 模块 .EXPORT = AppBody ;
appFooter.js 这包含所有导航。
从 ‘ react ‘ 导入 React，{Component} ; 从 ‘ react-native ‘ 导入 { Text } ; export default class AppFooter extends Component { render （）{ return（ < Text > Footer </ Text > ）; } } 模块 .EXPORT = AppFooter ;
index.ios.js＆index.android.js 导入根组件中的所有组件。
从 ‘ react ‘ 导入 React，{Component} ; 从 ‘ react-native ‘ 导入 { Text ， AppRegistry } ; 从 ‘ ./src/components/appHeader ‘ 导入 AppHeader ; 从 ‘ ./src/components/appFooter ‘ 导入 AppFooter ; 从 ‘ ./src/components/appBody ‘ 导入 AppBody ; 出口
默认 类 MyProject 扩展 Component { render （）{ return （ < View > < AppHeader > < AppBody > < AppFooter > < / View > ）; } } AppRegistry .registerComponent（ ‘ MyProject的的 ‘，（）=> MyProject的的 ）;
NativeBase NativeBase 是React Native Install NativeBase 的用户界面 框架
$ npm install native-base --save
启动重新构建 在安装新软件包时，必须重新启动 反应天然 构建终端。
$ react-native run-ios
创建IMG夹数文件在此 复制所有图像。
React Native Components文件夹
appHeader.js 使用 NativeBase UI组件 修改 Header 组件 。
从 ‘ react ‘ 导入 React，{Component} ; 从 ‘ react-native ‘ 导入 { Image } ; 从 ‘ native-base ‘ 导入 {Header，Left，Button，Icon，Title，Body，Right} ; export default class AppHeader extends Component { render（）{ return（ <Header> <Body> < Image source = {
require （‘ ../img/9lessonsLogo.png ‘）} style = {{宽度： 160 ，高度：30}} /> </ Body> </ Header> ）; } } 模块 .EXPORT = AppHeader ;
appBody.js 使用 NativeBase Card组件 修改 Body 组件 。
从 ‘ react ‘ 导入 React，{Component} ; 从 ‘ react-native ‘ 导入 { Text } ; 从 ‘ native-base ‘ 导入 {Content，Card，CardItem，Body} ; 导出 默认 类 AppBody 扩展 组件{ render（）{ return （ <Content> <Card> <CardItem> <Body>
< 文字 > 我的项目文本 </ Text > </ Body> </ CardItem> </ Card> </ Content> ）; } } 模块 .EXPORT = AppBody ;
appFooter.js 您可以 使用 NativeBase组件 修改 页脚 组件 。
从 ‘ react ‘ 导入 React，{Component} ; 从 ‘ react-native ‘ 导入 { Text } ; 从 ‘ native-base ‘ 导入 {Footer，FooterTab，Button，Icon} ; export default class AppFooter extends Component { render（）{ return （ <Footer> <FooterTab> <Button active >
<Icon name =“egg”/> < Text > Feed </ Text > </ Button> <Button> <Icon name =“paper”/> < Text > Camera </ Text > </ Button> <Button> <Icon active name =“person”/> < Text >关于</ Text > </ Button> </ FooterTab>
</ Footer> ）; } } 模块 。 NativeBase Customization 在项目文件夹中执行以下命令，这将创建主题文件夹。 看看现场演示。
$ node node_modules / native-base / ejectTheme.js
使用项目名称重命名主题文件。
React Native Components文件夹
index.ios.js＆index.android.js 导入主题文件并与 getTheme 组件 链接 。
从 ‘ react ‘ 导入 React，{Component} ; 从 ‘ react-native ‘ 导入 { Text ， AppRegistry } ; 从‘ native-base ‘ 导入 {Container，StyleProvider} ; 从‘ ./src/themes/components ‘ 导入 getTheme ; 从‘ ./src/themes/variables/nineLessons ‘ 导入 nineLessons ; 从 ‘ ./src/components/appHeader
‘ 导入 AppHeader ; 从 ‘ 导入 AppFooter ‘ ./ src/ components/ appFooter ‘; 从 ‘ ./src/components/appBody ‘ 导入 AppBody ; export default class MyProject extends Component { render（）{ return （ < StyleProvider style = { getTheme （ nineLessons ）}> <Container> <AppHeader /> <AppBody /> <AppFooter /> <
</ StyleProvider > ）; } } AppRegistry .registerComponent（ ‘ MyProject的的 ‘，（）=> ）; 重新构建您的IOS项目
$ react-native run-ios
iOS版视图
React Native iOS视图
重新构建您的的Android项目
$ react-native run-android
Android的视图
React Native Android视图
原文地址：https://blog.51cto.com/14409494/2420388