reactnative 學習1

1. RR或者ctrl+m 搖一搖             
2. 打開項目開發菜單     ctrl+d
3. 打開項目：atom 項目名稱

 

1.react-native --version                                  //查看當前reactNative版本
2.sudo npm update -g react-native-cli         //更新全局的reactNative到最新版本
3.npm info react-native        //查看服務器端的reactNative的各版本信息
4.npm install                                      //給下載的普通工程下載安裝RN環境,根據配置的package.json
4.npm start                                      //開啓nodejs服務器，客戶端可鏈接下載react js代碼，注意debug setting裏的ip和端口號分別是電腦 ip:8081
5.react-native upgrade                     //根據package.json配置的RN版本,更新RN環境代碼
6.react-native run-android //運行Android工程
7.react-native run-ios //運行IOS工程
8.react-native init 項目名字                 //初始化一個工程、下載React Native的全部源代碼和依賴包
9.npm install --save react-native@0.18          //項目降級或升級到指定版本,記得react-native upgrade更新一下項目依賴等
10. npm install react-native-storage --save   // 安裝某個lib到項目中

搭框架：

Day01

1.Facebook出產，手機端開發淘寶電商公司。Navigator適配於iOS和Android面向配置開發。經過js 進行封裝。2015年9月15發佈。

提倡組件化開發。

2.優點：跨平臺開發，熱部署追求機制的用戶體驗。Learn once，write anywhere。一次學，處處寫。

3.虛擬DOM以及運行機制，將api和dom進行包裝。

4.注意事項：iOS7以上，Android4.1以上版本適用。

Day02

1. 配置環境https://reactnative.cn/docs/0.51/getting-started.html#content

Chocolatey包管理器安裝

"iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"@powershell -NoProfile -ExecutionPolicy Bypass -Command&& SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

Python 2

installchocopython2

Node

    installinstallchoconodejs.

    npm//npmglobalconfig set registry https:registry..taobao.org --

npm//npmglobalconfig set disturl https:.taobao.org/dist --

Yarn、React Native的命令行工具（react-native-cli）#

npmnativeinstall -g yarn react--cli

set//registry.npm.taobao.org--globalyarn configregistry https:

set//npm.taobao.org/dist--globalyarn configdisturl https:

 

Android Studio

 javac –version   查看版本號不超過1.8

安裝： http://www.android-studio.org/

安裝有差別，安裝完後才提示沒有sdk點擊安裝

installchocogit

react-native init 項目名稱

1. （cd..上層目錄    C:/>cd c:/"documents and settings"下層目錄）
2. 出現

 

1. 運行
2. 出現

To run your app on iOS:

   cd C:\Users\Administrator\Ahello

   react-native run-ios

   - or -

   Open ios\Ahello.xcodeproj in Xcode

   Hit the Run button

To run your app on Android:

   cd C:\Users\Administrator\Ahello

   Have an Android emulator running (quickest way to get started), or a device c

• onnected

  運行： react-native run-android

Day3樣式：style

ainer: {

  backgroundColor : '#eae7ff',

  flex : 1,

  /*margin : 30,

   borderWidth : 1,

   borderColor : '#6435c9',

   borderRadius : 16,

   shadowColor : '#6435c9',

   shadowOpacity : 0.6,

   shadowRadius :2,

   shadowOffset :{

   height : 5,

   width :4

   },*/



},

welcome: {

  fontSize: 20,

  textAlign: 'center',

  margin: 10,

  fontStyle: 'italic',

  letterSpacing: 2,

  lineHeight: 33,

  fontFamily: 'Helvetica Neue',

  fontWeight: '300',

  textDecorationLine: 'underline',

  textDecorationStyle: 'solid',



},

day04 佈局flexbox

快捷建立(View>Text{$})*3    tab鍵    ，Alt鍵選中多個輸入

export default class App extends Component<Props> {

  render() {

    return (

      <View style={styles.container}>

        <View style= {[styles.item,styles.itemOne]}>

          <Text style={styles.itemText}>1</Text>

        </View>

        <View style= {[styles.item,styles.itemTwo]}>

          <Text style={styles.itemText}>2</Text>

        </View>

        <View style= {[styles.item,styles.itemThree]}>

          <Text style={styles.itemText}>3</Text>

        </View>

      </View>

    );

  }

}



//style 行內style =  {{}}，或StyleSheet.create({})

const styles = StyleSheet.create({

  item: {

    backgroundColor:'#fff',

    borderWidth: 1,

    borderColor: '#6435c9',

    margin:6,

  },

  itemOne: {},

  itemTwo: {},

  itemThree: {},

  itemText:{

    fontSize: 33,

    fontFamily: 'Helvetica Neue',

    fontWeight: '200',

    color: '#6435c9',

    padding: 30,

  },

左右alignItems:flex-start,center,flex-end

alignSelf: flex-start,center,flex-end

上下justifyContent: 'center',//center讓總體居中flex-end底部，space-around

總的view 設置flex：1  平均大小，讓某一個變大單獨加flex:值大於1

豎列排列：總的view設置flexDirection: 'row',

day05組件view

1. view組件，

2. 文本組件，用view組件包起來<Text>內容</Text>

3.建立自定義Text組件，設計樣式，而後導入到要使的地方

第一步：

上一個組件中引入：

<HeaderText>

    nihao .net

</HeaderText>

第二步：

class HeaderText extends React.Component{

  render(){

    return (

      <Text style= {styles.itemText}>

        {this.props.children}

      </Text>

    )

  }

}

4.圖像組件 Image

<Image style={styles.image} source={require('./image/1.png')}/>
<Image style={styles.backgroundImage} source={require('./image/1.jpg')}>
</Image>

 

5.列表視圖datasource   renderRow