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包管理器安装

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

Python 2

choco install python2

Node

    choco install nodejs.install

    npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

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

npm install -g yarn react-native-cli

yarn config set registry https://registry.npm.taobao.org --global

yarn config set disturl https://npm.taobao.org/dist --global

Android Studio

 javac –version   查看版本号不超过1.8

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

安装有差异，安装完后才提示没有sdk点击安装

choco install git

react-native init 项目名称

1. （cd..上层目录    C:/>cd c:/"documents and settings"下层目录）
2. 出现

1. 运行
2. 出现

To run your app on iOS:

   cd C:UsersAdministratorAhello

   react-native run-ios

   - or -

   Open iosAhello.xcodeproj in Xcode

   Hit the Run button

To run your app on Android:

   cd C:UsersAdministratorAhello

   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