安装React Native命令行

打开终端或命令提示符并执行以下命令，这将全局安装React Native Cli。在此之前，您必须使用最新的Node.js软件设置您的机器。

$ sudo npm install -g react-native-cli

注意：这仅适用于Mac OS，很快它们将针对Linux和Windows发布 创建并启动React Native Project 这里的新命令将处理项目文件。使用ng serve命令启动应用程序。

$ react-native init MyProject $ cd MyProject

使用iOS模拟器启动项目

$ react-native run-ios

使用Android模拟器启动您的

$ react-native run-android

热加载 命令+ D 启用热加载以进行实时开发。

入门此项目是一个显示博客供稿的页面。首先，我们将此页面分为3个组件，如页眉，页脚和正文。 创建SRC文件夹 创建appHeader.js，appBody.js和appFooter.js等组件。

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 扩展 Component { 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 ; export default class MyProject extends 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 构建终端。

$ react-native run-ios

创建img文件夹在此 复制所有图像。

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 扩展 Component { render（）{ return （ <Content> <Card> <CardItem> <Body> < Text > 我的项目文本 </ Text > </ Body> </ CardItem> </ Card> </ Content> ）; } } 模块 .EXPORT = AppBody ;

appFooter.js 您可以使用 NativeBase组件修改 Footer 组件。

从 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 在项目文件夹中执行以下命令，这将创建themes文件夹。看看现场演示。

$ node node_modules / native-base / ejectTheme.js

使用项目名称重命名主题文件。

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 /> </ Container> </ StyleProvider > ）; } } AppRegistry .registerComponent（ MyProject的，（）=> ）;

重新构建您的IOS项目

$ react-native run-ios

iOS视图