RN開發(fā)(一):準備

說明

本文是作者 Lefe 所創(chuàng)定躏,轉(zhuǎn)載請注明出處痒留,如果你在閱讀的時候發(fā)現(xiàn)問題歡迎一起討論。本文會不斷更新听哭。

React Native相信大家都不陌生慢洋,多多少少會聽到它的傳聞。最近由于公司在做電商項目欢唾,遇到很多需要及時處理的問題且警,比如某個商品需要打折,某個商品需要促銷礁遣,對于那些多變的界面斑芜,使用H5做,用戶體驗比較差祟霍。為了滿足這一需求杏头,來研究下RN。 React Native 中文網(wǎng)

環(huán)境搭建

這個比較簡單沸呐,由于以前學(xué)習Node很多環(huán)境配置過醇王,在配置RN的時候沒有花費太多的時間。不過遇到一個問題就是在執(zhí)行 react-native init AwesomeProject的時候如果你沒有更改NPM源的話崭添,它會一直卡著寓娩,所以建議更換NPM源,淘寶源.

基礎(chǔ)

學(xué)習RN的時候,其實直接看 官方文檔 比較靠譜棘伴,這樣會讓你少走一些彎路寞埠,以免被別人帶到別處,如果看不懂英文焊夸,沒關(guān)系這里還有 中文版 仁连。基礎(chǔ)部分主要建設(shè)了一下幾部分:

  • Prpos(屬性):可以給組件添加自定義的屬性阱穗,當然也可以使用組件自帶的屬性
import React, { Component } from 'react';
import { 
  AppRegistry,  
  View, 
  Image, 
  Text,
  StyleSheet
} from 'react-native';

class Greeting extends Component {
  render() {
    return (
      // 使用 this.props 獲取屬性的組件的屬性
      <Text> Name: {this.props.name}, address: {this.props.address}!</Text>
      );
  }
}

class ImageComponent extends Component {

  render() {
    let pic = {
      url: 'http://www.7xsm.net/upload/img/59/5977EE1CE18AB4CCAF6A616A50147B03.jpg'
    };

    return (
      // source style 為Image自帶的屬性
      <Image source = {pic} style = {{width: 300, height: 300}} />
    );
  }
}

class AwesomeProject extends Component {
  render() {
    return (
    <View style={{alignItems: 'center', marginTop: 64}}>
     <Greeting name = 'WSY' address = 'BeiJing'/>
     <Greeting name = 'Lefe' address = 'XingHe'/>
     <Greeting name = 'BX' address = 'HuShi'/>
     <ImageComponent />
    </View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
  • State(狀態(tài)):
import React, { Component } from 'react';
import { 
  AppRegistry,  
  View, 
  Text,
  StyleSheet
} from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    setInterval( () => {
      this.setState({showText: !this.state.showText});
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';

    return (
      <Text>{display}</Text>
    );
  }
}

class AwesomeProject extends Component {
  render() {
    return(
    <View style={{marginTop: 64}}>
      <Blink text = 'I am lefe, an iOS developer. Welocome to React Native' />
    </View>
    );
  }
}


AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

  • Height and Width(寬饭冬、高):flex動態(tài)縮放
  • Styles(樣式表): 添加多個樣式表的時候使用[]
import React, { Component } from 'react';
import {
  AppRegistry, 
  StyleSheet, 
  Text,
  View
} from 'react-native';

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  size: {
    width: 300,
    height: 400
  },
  flexStyle: {
    flex: 1
  }
});

class AwesomeProject extends Component {
  render(){
    return (
      <View style={styles.flexStyle}>
        <Text style={styles.bigblue}>I am lefe, an iOS developer</Text>
        <Text style={[styles.bigblue, styles.size]}>I am lefe, an iOS developer</Text>
      </View>
    );
  };
}


AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

  • Layout with Flexbox:
  • Handing Text Input:
  • Using a ScrollView:
  • Using a ListView:
  • Networking:
  • Using navigators:

===== 我是有底線的 ======
喜歡我的文章,歡迎關(guān)注我的新浪微博 Lefe_x揪阶,我會不定期的分享一些開發(fā)技巧

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末昌抠,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子遣钳,更是在濱河造成了極大的恐慌扰魂,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蕴茴,死亡現(xiàn)場離奇詭異劝评,居然都是意外死亡,警方通過查閱死者的電腦和手機倦淀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進店門蒋畜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人撞叽,你說我怎么就攤上這事姻成。” “怎么了愿棋?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵科展,是天一觀的道長。 經(jīng)常有香客問我糠雨,道長才睹,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任甘邀,我火速辦了婚禮琅攘,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘松邪。我一直安慰自己坞琴,他們只是感情好,可當我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布逗抑。 她就那樣靜靜地躺著剧辐,像睡著了一般寒亥。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上荧关,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天护盈,我揣著相機與錄音,去河邊找鬼羞酗。 笑死,一個胖子當著我的面吹牛紊服,可吹牛的內(nèi)容都是我干的檀轨。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼欺嗤,長吁一口氣:“原來是場噩夢啊……” “哼参萄!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起煎饼,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤讹挎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后吆玖,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體筒溃,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年沾乘,在試婚紗的時候發(fā)現(xiàn)自己被綠了怜奖。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出轿腺,到底是詐尸還是另有隱情蓖康,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布珊拼,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏钙皮。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一募强、第九天 我趴在偏房一處隱蔽的房頂上張望株灸。 院中可真熱鬧,春花似錦擎值、人聲如沸慌烧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽屹蚊。三九已至厕氨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間汹粤,已是汗流浹背命斧。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留嘱兼,地道東北人国葬。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像芹壕,于是被迫代替她去往敵國和親汇四。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容