安装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等组件。

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视图

重新构建您的Android项目

$ 

react-native 

run-android

Android视图

ITPub博客

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

安装React Native命令行

最新文章