react-native第一天笔记

写rn之前有必须了解哈生命周期；
https://blog.csdn.net/u012583459/article/details/52999564；这个兄弟写的很透彻，很好

http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8/13 // es5和es6写法的一些对比；

props是在父组件中进行设置，只要设置完成那么该在组件的声明周期中就定死了，不会发生改变；
所以针对数据变化修改的情况，我们需要使用state属性。

1.App.js 是一个项目的入口的文件；

import React, { Component } from 'react';
import Login from './src/pages/Main'
/**
 * 入口文件
 */
export default class App extends Component {
    render() {
        return (
           <Login/>
        );
    }
}

2.index.js 注册全局变量比如说storage；navigation；
3.获取当前设备的宽度，便于百分比布局；
const SCREEN_WIDTH = Dimensions.get('window').width;
4.安卓返回键（返回到桌面，而不是直接退出程序）

import  {NativeModules} from 'react-native'  // 将原生模块引入进来
let  NativeCommonTools = NativeModules.CommonTools;   //  类
   goBack(){
        // 监听安卓返回事件 点了返回直接关闭app
        BackHandler.addEventListener('hardwareBackPress', () => {
             if(this.refs['tabBottom'].refs['statistics'].refs['orderTemplateItems'].state._isShow)                                                                                                                                                                { 
                    this.refs['tabBottom'].refs['statistics'].refs['orderTemplateItems'].dismiss();
            }else{
                NativeCommonTools.onBackPressed();          // 调用原生方法 返回到桌面 但是不退出程序       
}

           } );
       }

5.在组件销毁之后，android返回键的监听事件也销毁了
componentWillUnmount() { if (Platform.OS === 'android') { BackHandler.removeEventListener('hardwareBackPress',()=>{}); } }
6.记录一般app的首页，会有几个常用应用，然后跳转到其他页面，去设置你自己喜欢的应用；
在rn，我之前一直是把=》还是困恼了好久好久了这种方法之前没有用过没有这样的意识

   { imgUrl: require('./../../images/application/gonghaikeh.png'), text: '最爱vue', add: '',navigation:'SeasClient' },

imgurl 直接storage，四张图片弄成一个数组里面；一起保存，但是在其他页面的get的时候，imgurl直接就是38,39之类的数字，后来问网友，说的是保存的是项目的相对位置，但是get的时候是手机的目录，所以就会出现各种乱七八糟的图片，大小不一；
解决方法：在第二个页面，还是这样的操作，只是增加一个navigation这样的一个字段；
然后在首页：

//  初始化icon
 async initIcon(){
        let customize= await get('customize');   // 这是保存的数组
        if(customize != null){
            var icons = [];
            for (var item of customize) {      
                for (var icon of this.state.icons){   //  这是初始化的icon数据
                    if(icon.navigation == item.navigation){     // 两者进行相比较；导航字段相同的话
                        icons.push(
                            {
                                text: item.text,  
                                navigation: icon.navigation,
                                imgUrl: icon.path      // 就把初始化的icon的path 赋值给icons
                            }
                        )
                        break;
                    }
                }
            }
            this.setState({acceptPassedValue : icons});

        }
        // 初始化icon
        else if (customize == null){    // 用户第一次登陆进来  还没有storage，就初始化数据
            await set("customize", this.state.acceptPassedValue);
        }
    }

通俗一点的例子：你去见一个网友，然后你们之前没有见过，你们就是熟悉的陌生人，但是有了第三者—–（老王）；他认识你的网友，好，你们这样之间就有了桥梁（navigation）；这样就好说话了，不会是见光死的那种了！

7.小提示

<TouchableHighlight     disabled={this.state.disabled}>   要想该组件不能点，只需要设置disabled={true}

 commonlyUsed.splice(index, 1);  // 删除当前的索引值  js这个方法没咋用到  在app的自我设置喜欢的常用的软件  要用到

8.在与后台交换时候，我们厂（装逼）都是给后台穿的是json对象，很少会传数组；

import { aa }  from './../../'
  this.state = {
            query : {           // 查询字段
                pageNum : 1,    // 当前页数
                pageSize : 1,   // 最大页数
            },
    }
     async componentWillMount(){               //  不需要打转转  就不用写在Didmount里面了
        let remind = await   aa(this.state.query);  //  直接就传对象，放回的data直接赋值给remind
        if(remind.result == -1){
            return;                              //  
        }
        this.setState({
            remind : remind.data.rows.length == 0 ? null : remind.data.rows[0],
        })
    }

9.一个标配的react-native的页面；

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, Dimensions, TouchableHighlight } from 'react-native'
const SCREEN_WIDTH = Dimensions.get('window').width;   //  这些就是你要引入的组件，还有接口名 

/**
 * 消息
 */
export default class News extends Component {
    constructor(props) {
        super(props)            //  在构造函数里面写函数，现在就只有在清除缓存的时候  才遇到过，其他都没有
        this.state = {          //  初始化状态 
            query : {
                pageNum : 1,    // 当前页数
                pageSize : 1,   // 最大页数
            },   
        }
    }
    async componentWillMount(){             //  组件初始化完成，可以写接口，准备渲染数据
    }
    render() {                    //   这里面写需要循环的数据  也可以console你获取的数据，这里就是render之后的，组件加载（操作dom了）;
       let items = [];
        this.state.invoice.map((el, index) => {
            items.push(
                <View style={styles.expressItem} key={index}>
                    <View style={styles.expressRightFirst}>
                        <View style={styles.process}>
                            <Text style={{ color: '#888', fontSize: 15 }}>{el.ctime}</Text>
                            <Text style={{ color: '#464646', fontSize: 15 }}>{el.content}</Text>
                        </View>
                    </View>
                    <View style={styles.expressLeft}></View>
                </View>
            );
        });
        return (
            <View style={styles.container}>
                  {items}
            </View>
        );
    }
      edit() {    // render之外就写各种函数
      }
     componentWillUnmount() {                     //  组件销毁时候，把android的返回键的监听事件去除了
        if (Platform.OS === 'android') {
            BackHandler.removeEventListener('hardwareBackPress', () => { });
        }
    }
}

// 写css
const styles = StyleSheet.create({
    container:{
        flex: 1,
        backgroundColor:'#FAFAFA',
    },

});
{ this.state.announce == null ? '暂无信息' : this.state.announce.sourceContent }

明天接着更

react-native第一天笔记

猜你喜欢