反应本机模板设计入门（1）

安装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 启用热加载以进行实时开发。 

入门 此项目的英文一个显示博客供稿的页面。 首先，我们将此页面分为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  扩展  组件{  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夹数文件在此 复制所有图像。 

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（                                             Image  source = {  
require （'  ../img/9lessonsLogo.png  '）}  style = {{宽度： 160 ，高度：30}} />                                          ）;      }  }  模块  .EXPORT =  AppHeader  ; 


  





             

appBody.js 使用 NativeBase Card组件 修改 Body  组件 。 

从   '  react  '  导入   React，{Component}   ;  从   '  react-native  '  导入   {  Text  }   ;  从   '  native-base  '  导入   {Content，Card，CardItem，Body}   ;  导出   默认   类   AppBody  扩展   组件{      render（）{  return （                                                                                 
                            文字  >                                 我的项目文本                             Text  >                                                                                          ）;      }  }  模块  .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 （                                                      active  >  
                                                  Text > Feed Text  >                                                                                                Text   > Camera Text   >                                                                                                Text   >关于Text   >                                          


  

         















                      ）;      }  }  模块 。 

NativeBase Customization 在项目文件夹中执行以下命令，这将创建主题文件夹。 看看现场演示。 

$ 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 ）}>                                                

  
  



      StyleProvider   >      ）;    }  }  AppRegistry  .registerComponent（ '  MyProject的的 '，（）=>  ）; 



     

重新构建您的IOS项目 

$  react-native  run-ios  

iOS版视图 

重新构建您的的Android项目 

$  react-native  run-android

Android的视图