前言：
webstorm開發(fā)RN的時候默認是不支持代碼自動化提示的，所以下面給出解決連接配喳，我這里就不多說了
windows下webstorm開發(fā)react-native智能提示
webstorm開發(fā)RN語法支持：settings->Languages&Frameworks->Javascript:
語法支持
首先介紹下之前我們創(chuàng)建的工程下面主要的幾個模塊的作用
文件結(jié)構(gòu)
android：從名字就可以看出這里是我們原生安卓的一些東西
ios:同理這里是一些ios原生的東西
node_modules:這里類似與安卓依賴庫后的緩存代碼集酪穿，這里存放我們的一些module
App.js:暫時可以理解為我們用來寫js，畫界面的地方
index.js:入口文件晴裹，類似于安卓的application
大概解釋下index.js的代碼
import { AppRegistry } from 'react-native';
import App from './App';
//這里的`MyDemo`必須和工程名字保持一致
AppRegistry.registerComponent('MyDemo', () => App);
- APPRegistry不用說了被济，類似于application，是用來告知React Native哪一個組件被注冊為整個應(yīng)用的根容器涧团。
- 第二句話就是導入我們的js模塊溉潭，我們的HelloWorld將在這里誕生
- 第三句就是注冊了净响，第一個參數(shù)使我們項目名稱，第二個意思就是注冊APP這個組件
萬年不變的HelloWorld
- 首先根據(jù)文檔點擊官方文檔連接,跟著官方文檔來
根據(jù)官網(wǎng)文檔提示喳瓣，我們可以將App.js里原有的內(nèi)容刪掉馋贤，創(chuàng)建我們自己的- 第一步導入React下的Component組件
//引入 React的抽象組件 import React, { Component } from 'react'; - 第二步我們導入Text，我們要寫文本的HelloWorld嘛,而我想再為文字設(shè)置一些樣式畏陕，所以導入了StyleSheet
//引入 ReactNative的具體組件 import { Text,StyleSheet } from 'react-native'; - 第三步定義組件,定義HelloWorldAPP繼承Component配乓，并重寫render（）函數(shù)
export default class HelloWorldApp extends Component { render() { return ( //這里就是返回我們的HelloWorld文本 return( <Text>Hello world!</Text> ); } }
- 第一步導入React下的Component組件
export default關(guān)鍵字：注意組件聲明前面的export default關(guān)鍵字。它的意思是導出(export)當前組件惠毁，以允許其他組件引入(import)和使用當前組件
- 接下來給HelloWorld添加點樣式,定義樣式
const styles=StyleSheet.create({ helloWorld:{ color:'red',//顏色紅色 fontSize:34,// fontWeight:'bold'//粗體 } }) - 使用樣式
<Text style={styles.helloWorld}>Hello world!</Text>
或是不適用StyleSheet犹芹，直接對文本的屬性賦值，如：
<Text style={{color: 'red',fontSize:34,fontWeight:'bold'}}>Hello world!</Text>
這里可以理解為對style賦值一個匿名內(nèi)部內(nèi)鞠绰，這個內(nèi)部內(nèi)其實就是{color: 'red',fontSize:34,fontWeight:'bold'}這個對象
完整代碼
/**
* 創(chuàng)建人：賴天兵
* 時間： 2018/2/24
* 簡書：http://www.reibang.com/u/2229fd214880
* 掘金：https://juejin.im/user/58647e21128fe1006d0f3f3e
* github：https://github.com/93Laer
* 描述：
*/
import React, { Component } from 'react';
import {
Text
,StyleSheet
} from 'react-native';
export default class HelloWorldApp extends Component {
render(){
return(
//<Text style={styles.helloWorld}>Hello world!</Text>
<Text style={{color: 'red',fontSize:34,fontWeight:'bold'}}>Hello world!</Text>
);
}
}
const styles=StyleSheet.create({
helloWorld:{
color:'red',//顏色紅色
fontSize:34,//
fontWeight:'bold'//粗體
}
})
