ITPub博客

首页 > 应用开发 > Javascript > React本机模板设计入门(1)

React本机模板设计入门(1)

原创 Javascript 作者:cenfeng 时间:2019-07-10 18:04:01 0 删除 编辑

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

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  扩展  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文件夹在此
复制所有图像。
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  扩展   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

使用项目名称重命名主题文件。
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 />        </ Container>        </  StyleProvider   >      );    }  AppRegistry  .registerComponent( '  MyProject的 ',()=> 



    











);

重新构建您的IOS项目
react-native    run-ios

iOS视图
React Native iOS视图

重新构建您的Android项目
react-native  run-android

Android视图
React Native Android视图


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69933200/viewspace-2650156/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-06-18

  • 博文量
    60
  • 访问量
    40306