安裝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部落格 ” ，連結：http://blog.itpub.net/69933200/viewspace-2650156/，如需轉載，請註明出處，否則將追究法律責任。

React本機模板設計入門(1)

安裝React Native命令列

相關文章