从零开始 React Native(8) flex布局_常用控件案例

flex布局_常用控件案例

直接看这篇文章
https://www.baidu.com/link?url=GdCoTjP5fV04wIAnK1HgT8sggbyv59IqhzNmclOmoeyQsYuMKDbudX2d34WAJ8Jz9reLTyxy8P9fKazz83SA7J-_v4QhV5DndgFEoEnR7NW&wd=&eqid=eb33faab0001724b00000003591adbc3

这是React Native 文档地址
http://reactnative.cn/docs/0.42/getting-started.html

然后是案例 做个这种效果

主要的js代码

/** * Created by liuml on 2017/5/10. */
import React,{Component} from "react";
import {
    StyleSheet,View,Text,Image

} from 'react-native'
//获取屏幕的宽度
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var boxWidth = width / 3;
console.log(width);
//获取json数据
var JsonData = require('./test.json');
class BagView extends Component {

    renderBags = () => {
        return JsonData.data.map((item,i) => {
            return <View key={'wrap' + i} style={style.wrapperStyle}>
                <Image style={style.imageStyle} source={require('./images/danjianbao.png')}/>
                <Text >{item.title}</Text>
            </View>
        })
    }

    render() {
        return <View style={style.container}>
            {this.renderBags()}
        </View>;
    }
}


const style = StyleSheet.create({

    container: {
        flexDirection: 'row',flexWrap:'wrap' //换行
    },wrapperStyle: {
        flexDirection:'column',//主轴，垂直方向
        alignItems:'center',//交叉轴，居中对齐
        width: 100
    },imageStyle: {
        width: 80,height: 80

    }
});

module.exports = BagView;

然后是 调用的地方

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,{Component} from 'react';
import {
    AppRegistry,StyleSheet,Image
} from 'react-native';

/*export default class first extends Component {
 render() {
 return (
 <View style={styles.container}>
 {/!*<Text style={styles.textStyle}>*!/}
 {/!*按照数组做,按照后面的有限*!/}
 <Text style={[styles.textStyle,{width: 100,backgroundColor: '#0F0'}]}>
 文本1
 </Text>
 <Text style={[styles.textStyle,{width: 110}]}>
 文本2
 </Text>
 <Text style={[styles.textStyle,{width: 250}]}>
 文本3
 </Text>
 </View>
 );
 }
 }*/
/*export default class first extends Component {
 render() {
 return (
 <View style={styles.container}>
 {/!*<Text style={styles.textStyle}>*!/}
 {/!*按照数组做,{width: 110,height: 30,alignSelf: 'flex-end'}]}>
 文本2
 </Text>
 <Text style={[styles.textStyle,{width: 80,height: 50,backgroundColor: '#00F'}]}>
 文本3
 </Text>
 </View>
 );
 }
 }*/


// var Dimensions = require('Dimensions');
// var width = Dimensions.get('window').width;
// var boxWidth = width / 3;
// var BagView = require('./BagView');

var BagView = require('./BagView');
var LoginView = require('./LoginView');
// export const BagView = require('./BagView');
export default class first extends Component {
    render() {
        return <BagView/>
    }
}


/*
 const styles = StyleSheet.create({
 container: {
 //flexDirection 主轴方向
 // flexDirection: 'column',// 竖
 // flexDirection:'column-reverse',//
 flexDirection: 'row',//横
 // flexDirection: 'row-reverse',backgroundColor: '#F5FCFF',flexWrap: 'wrap',//项目在主轴上的对齐方式
 justifyContent: 'flex-start',// alignItems: 'flex-start'
 // justifyContent:'flex-end'
 // justifyContent:'center'
 },textStyle: {
 width: 100,backgroundColor: '#F00'

 }

 });
 */

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

接下来做一个登录的界面

下面是主要的js代码

/** * Created by liuml on 2017/5/16. */
import React,Image,TextInput,TouchableOpacity

} from 'react-native'

class LoginView extends Component {
    render() {
        return <View style={styles.container}>
            <Image source={require('./images/icon.png')} style={styles.iconStyle}></Image>
            <View style={styles.inputWarpperStyle}>
                <TextInput style={styles.inputStyle} textAlign="center" placeholder={'请输入qq号码'}></TextInput>
            </View>
            <View style={styles.inputWarpperStyle}>
                <TextInput style={styles.inputStyle} textAlign="center" secureTextEntry={true} keyboardType="numeric"
                           placeholder={'请输入密码'}></TextInput>
            </View>

            {/*可以用button 用Text尝试 TouchableOpacity 透明度变化 */}
            <TouchableOpacity
                activeOpacity={0.5}
            >
                <View style={styles.textWrapperStyle}>
                    <Text style={{color: '#FFFF',flex: 1,textAlign: 'center',alignSelf: 'center'}}>登录</Text>
                </View>
            </TouchableOpacity>
        </View>
    }
}

const styles = StyleSheet.create({

    container: {
        flexDirection: 'column',alignItems: 'center'
    },iconStyle: {
        width: 80,height: 80,borderRadius: 40,marginTop: 50,marginBottom: 50
    },inputWarpperStyle: {
        flexDirection: 'row'
    },inputStyle: {
        flex: 1//填满父容器
    },textWrapperStyle: {
        flexDirection: 'row',backgroundColor: '#87CEFA',marginLeft: 15,marginRight: 15,borderRadius: 20,height: 30,width: 300

    }
});
module.exports = LoginView;