react native 基础(一)

一.更新本地React Native的版本 npm updata -g react-native-cli

二.内容 代码注释

{/*<Text style={styles.welcome}>我是存在的</Text>*/}

三.样式

①

<Text style={{backgroundColor: "red",height:30}}>第1个</Text>
<Text style={[styles.container1,styles.container2]}>第1个</Text>

②注:React Native中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

注意:样式可以用变量或者js语法:

let Dimensions=require("Dimensions");
let vWidth=width-100;
const styles = StyleSheet.create({
  container: {
      backgroundColor:"purple",flexDirection:"column",justifyContent:"center",alignItems:"center",height:vWidth,width:Dimensions.get("window").width-20
  },});

四.获取当前屏幕的宽度、高度、分辨率

var Dimensions=require("Dimensions");  //引入模块
export default class ReacrtNativeProject extends Component {
  render() {
    return (
        <View style={styles.container}>
            <View>
                <Text>当前屏幕宽度:{Dimensions.get("window").width}</Text>
<Text >当前屏幕分辨率:{Dimensions.get("window").scale}</Text>
               <Text >当前屏幕高度:{Dimensions.get("window").height}</Text>
            </View>       
        </View>
    );
  }
}

五.state状态.我们使用两种数据来控制一个组件：`props`和`state`。`props`是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。对于需要改变的数据，我们需要使用`state`。

其中state的ES6写法如下：

//当state中定义的某个值发生变化，DOM元素就会发生变化(重新执行render函数)
//这是ES6写法
class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: “我是傻子" };  //定义state内容
  }
}
//取值：this.state.showText
//如果要改变值：this.setState({showText:”我变了"})

class BlinkApp extends Component {
  render() {
    return (
      <View>
          <Text>{this.state.showText}</Text>
      </View>
    );
  }
}

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

这是state的ES5写法：

var TextObj=React.createClass({
   getInitalState(){
     //操作.......
     //state设值
     return{
         text1:”我是内容1”，
         val2:“我是内容2”
      }
   }
})
//取值：this.state.showText
//如果要改变值：this.setState({showText:”我变了"})

六.this.props.name。

(this.props.name的值是不可修改的。除了用来接受参数外，还可以在ES5写法中getDefaultProps中定义不可修改的变量。详细看react native基础(二))

（定义一个类，把这个类当成单标签使用（要使用"/"闭合），并在这个组件中定制了一个属性(例如:name),那么在这个类中就可以接收到这个属性做处理，最后这个类返回一个组件）

注:可以用作不同的类之间的传参数

注意:把类做标签使用首字母要大写

同一个js文件不同类之间的传参数:

import React,{ Component } from 'react';
import { AppRegistry,Text,View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

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

不同js文件不同类之间的传参数:

ES5写法：

ES5写法

//传参数的类
        //判断
        ....
            //传参数
            <HomeHeader ImgData={this.state.headerDataArr}/>
        ....



//接受参数的类
var ScrollViewDemo=React.createClass({
   mixins:[TimerMixin],//设置固定值
    getDefaultProps(){
       return{
           //接受参数
           ImgData:[]  //可以先设置默认值
           //这里的ImgData和上面传参的ImdData要对应。表示这里的接受上面传过来的。接受的这个类里的ImgData的值可以设置一个默认值，也可以设置为空
       }
    },……………………………….

ES6写法

class Demo extends Component {
  constructor(props){
     super(props);
     
  }
  //设置固定值。如果值是其他外部的组件传过来的，可以先设置默认值
  static defaultProps={
    imgData:[]
  }
//这里设置固定值的值类型，比如数组是array,字符串是string，数字是number等等
  static propTypes={
    imgData:React.PropTypes.array.isrequired
  }
  render() {
       <View>哈哈</View>
    );
  }
}

七.Image组件的使用--详情看官网

静态图片资源

从0.14版本开始，React Native提供了一个统一的方式来管理iOS和Android应用中的图片。要往App中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后像下面这样去引用它：

<Image source={require('./my-icon.png')} />

图片文件的查找会和JS模块的查找方式一样。在上面的这个例子里，是哪个组件引用了这个图片，Packager就会去这个组件所在的文件夹下查找my-icon.png。并且，如果你有my-icon.ios.png和my-icon.android.png，Packager就会根据平台而选择不同的文件。

一般本地资源的路径不能写变量，如果要写变量要用以下办法,如下:

使用混合App的图片资源

如果你在编写一个混合App（一部分UI使用React Native，而另一部分使用平台原生代码），也可以使用已经打包到App中的图片资源（以拖拽的方式放置在Xcode的asset类目中，或是放置在Android的drawable目录里，放了之后要重新编译一下）。注意此时只使用文件名，不带路径也不带后缀：

IOS的在:

Android:如果没有文件就新建drawable文件

<Image source={{uri: 'app_icon'}} style={{width: 40,height: 40}} />

对于放置在Android的assets目录中的图片，还可以使用asset:/前缀来引用：

<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40,height: 40}} />

注意：这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在，而且还需要指定尺寸。

网络图片

很多要在App中显示的图片并不能在编译的时候获得，又或者有时候需要动态载入来减少打包后的二进制文件的大小。这些时候，与静态资源不同的是，你需要手动指定图片的尺寸。同时我们强烈建议你使用https以满足iOSApp Transport Security的要求。

// 正确
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400,height: 400}} />

// 错误
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />

网络图片的请求参数

你可以在Image组件的source属性中指定一些请求参数，如下面的示例：

<Image source={{
  uri: 'https://facebook.github.io/react/img/logo_og.png',method: 'POST',headers: {
    Pragma: 'no-cache'
  },body: 'Your Body goes here'
}}
style={{width: 400,height: 400}} />

缓存控制（仅iOS）

在某些情况下你可能仅仅想展示一张已经在本地缓存的图片，例如一个低分辨率的占位符，直到高分辨率的图片可用。在其他情况下你不关心图片是否是过时的，并愿意显示过时的图片，以节省带宽。缓存资源属性给你控制网络层与缓存交互的方式。

default：使用原生平台默认策略。
reload：URL的数据将从原始地址加载。不使用现有的缓存数据。
force-cache：现有的缓存数据将用于满足请求，忽略其期限或到期日。如果缓存中没有对应请求的数据，则从原始地址加载。
only-if-cached：现有的缓存数据将用于满足请求，忽略其期限或到期日。如果缓存中没有对应请求的数据，则不尝试从原始地址加载，并且认为请求是失败的。

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png',cache: 'only-if-cached'}}
       style={{width: 400,height: 400}} />

图片设置背景

①

<Image source={{uri:"http://xxxxxx....jpg"}} style={{width: 400,height: 400}}>
    <Text>我是图片中的文字</Text>
</Image>

②

<ImageBackground source={{uri:"xxxx...jpg"}} style={{width: 400,height: 400}}>
    <Text>Inside</Text>
</ImageBackground>

为什么不在所有情况下都自动指定尺寸呢?

在浏览器中，如果你不给图片指定尺寸，那么浏览器会首先渲染一个0x0大小的元素占位，然后下载图片，在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是UI会在图片加载的过程中上下跳动，使得用户体验非常糟糕。

在React Native中我们有意避免了这一行为。如此一来开发者就需要做更多工作来提前知晓远程图片的尺寸（或宽高比），但我们相信这样可以带来更好的用户体验。然而，从已经打包好的应用资源文件中读取图片（使用require('image!x')语法）则无需指定尺寸，因为它们的尺寸在加载时就可以立刻知道。

属性

onLayoutfunction

当元素挂载或者布局改变的时候调用，参数为：{nativeEvent: {layout: {x,y,width,height}}}.

onLoadfunction

加载成功完成时调用此回调函数。

onLoadEndfunction

加载结束后，不论成功还是失败，调用此回调函数。

onLoadStartfunction

加载开始时调用。

resizeModeenum('cover','contain','stretch','repeat','center')

决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。

cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白
stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。
repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。
center: 居中不拉伸。

source{uri: string},number

uri是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径（使用require(相对路径)来引用）。

This prop can also contain several remote URLs,specified together with their width and height and potentially with scale/other URI arguments. The native side will then choose the besturito display based on the measured size of the image container. Acacheproperty can be added to control how networked request interacts with the local cache.

目前原生支持的图片格式有png、jpg、jpeg、bmp、gif、webp（限Android）、psd（限iOS）。当然你可以在github上找一些第三方组件来扩充支持的格式。

八.组件中使用方法

export default class ReacrtNativeProject extends Component {
  render() {
function aa(){
       console.log("我是aa");
       return <Text style={styles.cc}>我是aa</Text>
   }
    return (
        <View style={styles.container}>
//returnAllBao声明在类中,是类的方法,所以要用this.returnAllBao调用
            {this.returnAllBao()}
           //方法aa声明在render方法中,所以不需要this
            {aa()}   
        </View>
    );
  }
  returnAllBao(){
    return <Text style={styles.cc}>111</Text>
  }
}

九.react native中创建类（组件）

//ES6写法
class projectname extends Component{
   constructor(props){
      super(props)
   }
   render(){
       return(<View></View>)
   }
}

//ES5写法
var projectname=React.createClass({
   //生命周期和自定义的方法....
   ………………..



   //…………..输出的内容
   render(){
       return(<View></View>)
   }
})

十.getDefaultProps设置固定值

//这是ES5写法
var projectname=React.createClass({
 //这是一个生命周期函数
  getDefaultProps(){
    //设置固定值,不可修改
    return{
       ValName:Val
    }
    
  },//…………..输出的内容
   render(){
       return(<View></View>)
   }
})

十一.componentDidMount(生命周期函数，组建成功渲染之后的操作)

//这是ES5写法
var projectname=React.createClass({
   //…………..输出的内容
   render(){
       return(<View></View>)
   },//这是一个生命周期函数.是组建渲染成功之后的操作
   componentDidMount(){

   }
})

原文链接：https://www.f2er.com/react/303492.html