速战react-native

react-native开发基础入门

2017-11-09  本文已影响35人  Yochi

react-native是面向组件的开发，基础知识相对简单，我们只需先迅速掌握主干知识，在以后的开发中就有了开枝散叶的资本。

项目结构

/**************组件导入**************/ 
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    ImageBackground,
} from 'react-native';

/**************平台区分 ios 和 android**************/ 
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {

/************渲染 相当于viewDidload**************/
  render() {
/**返回显示的内容**/
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

/************布局样式************/
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },

  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});


.
├── andoird/    
├── ios/    
├── src/    // 项目页面
│   ├── index.js        // 注册原生应用入口
│   ├── App.js          // 首页
│   ├── components/     // 各类组件
│   ├── pages/          // 页面
│   ├── images/         // 图片
│   ├── config/         // 项目配置内容
│   ├── logic/          // 项目逻辑
│   └── utils/          // 项目共计
└── network             // 网络服务
    └── DataService.js
.
├── components    //组成应用的各个组件
│   ├── Routers.android.js     //每个组件若实现不一样，分为android的实现和ios的实现。
│   ├── Routers.ios.js
│   ├── common       //公共组件
│   ├── issues       //议题页面
│   ├── navigation   //导航组件，android用侧边栏，ios准备用tab
│   └── project      //项目页面
└── network          //网络服务
    └── DataService.js
根据项目具体内容调节。。。

调试

布局和样式 （示例工程在末尾）

/*******************内联************************/
<View style={{flex: 1, backgroundColor: 'powderblue'}} />

/*******************外联************************/
<View style={styles.MyStyle}>
    <Text style={styles.instructions}>
       flexbox我是第一个View
    </Text>
</View>

// 样式定义
const styles = StyleSheet.create({

   instructions: {
     textAlign: 'center',
     color: '#333333',
     marginBottom: 5,
   },// 不同样式间逗号隔开
   MyStyle:{
       flex:1,
       backgroundColor:'red',
       flexDirection:'row', //主轴方向
       justifyContent:'space-around',// 主轴方向的对齐方式
       alignItems:'flex-end',// 次轴方向的对齐方式
   }
});

编写各式各样的UI

分辨率

// 获取屏幕宽高分辨率
var Dimensions = require('Dimensions');
let screenwidth  = Dimensions.get('window').width;
let screenheight = Dimensions.get('window').height;
let screenheight = Dimensions.get('window').scale;

iOS和Android区分

React Native提供了一个Platform模块用于检测当前运行app的平台。你可以根据这个检测逻辑去应用对应的针对特定平台的代码。

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  height: (Platform.OS === 'ios') ? 200 : 100,
});

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

// 直接使用
<Component />;

react-native生命周期

export default class Test extends Component {
    state={
        title:'默认值',
        person:'Hank'
    }
    static defaultProps={
        age:18
    }
    //
    render() {
        return (
            <View ref="topView" style={styles.container}>
                <Text>{this.state.person}</Text>
                <Text>{this.props.age}</Text>
                <Button title="我就是个Button"
                        color="red"
                        onPress={()=>this.click('点击')}
                />
            </View>
        );
    }
    click(event){
        //
        this.setState({
            title:event
        });
        //拿到View
        console.log(this.refs.topView)
    }
        //相当于OC中的ViewWillAppear
    componentWillMount(){
        //AlertIOS.alert('WillMount来了')
    }
    
    //哥么Render之后 -- 今后用来发送网络请求(第一次加载的数据)
    componentDidMount(){
        // AlertIOS.alert('DidMount')
    }

    //这个方法!!刷新UI之后调用!!!第一次加载UI不会来!!
    componentDidUpdate(){
        AlertIOS.alert('DidUpdate');
    }

    componentWillUnmount() {
        // 卸载界面
    }
    
    //当组件传入的 props 发生变化时调用，例如：父组件状态改变，给子组件传入了新的prop值。用于组件 props 变化后，更新state。
    componentWillReceiveProps(nextProps) {
    
    }
}
const btnClick = ()=>{
    AlertIOS.alert('哥么我来了!!')
}

示例Demo
运行方式：$npm install $react-native run-ios

上一篇 下一篇

猜你喜欢

热点阅读