从零开始 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. */@H_301_17@
import@H_301_17@ React,{Component} from "react"@H_301_17@;
import@H_301_17@ {
    StyleSheet,View,Text,Image

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

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

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


const style = StyleSheet.create({

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

    }
});

module.exports = BagView;

然后是调用的地方

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

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

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


//@H_301_17@ var@H_301_17@ Dimensions = require@H_301_17@('Dimensions'@H_301_17@);
//@H_301_17@ var@H_301_17@ width = Dimensions.get('window'@H_301_17@).width;
//@H_301_17@ var@H_301_17@ BoxWidth = width / 3@H_301_17@;
//@H_301_17@ var@H_301_17@ BagView = require@H_301_17@('./BagView'@H_301_17@);

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


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

 }

 });
 */

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

接下来做一个登录的界面

下面是主要的js代码

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

} from 'react-native'@H_301_17@

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

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

const styles = StyleSheet.create({

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

    }
});
module.exports = LoginView;

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

猜你在找的React相关文章