react-native--05界面布局

作者: 极光火狐狸 | 来源:发表于2017-01-12 00:09 被阅读527次

在html中所有的布局都依赖于css样式中的style继承(css中确切来说应该是不存在继承关系的，而是通过样式名称直接引用)，css拥有非常丰富的特性。
在react native中，样式的配饰和html有非常多的相似，比如说在html中声明背景颜色采用 background 或者 background-color，但是在react native中采用 backgroundColor, 所有的样式声明都是采用这种峰驼式风格。

View(视图)

react native中的View组件类似与html中的div，下面是一些针对View布局的一些测试代码。一个组件类中只能存在一个一级View。
正确的代码

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

class FlexDimensionsBasics extends Component {
    render() {
        return (
            <View><Text>hello world!</Text></View>
        );
    }
};

AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);

错误的代码

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

class FlexDimensionsBasics extends Component {
    render() {
        return (
            <View><Text>hello world!</Text></View>
            <View><Text>hello world!</Text></View>
        );
    }
};

AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);

multiView(多个视图)

一个组件类中只能存在一个一级View，因此多个View只能包裹在一级View中。

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

class FlexDimensionsBasics extends Component {
    render() {
        return (
            <View>
                <View><Text>hello world!</Text></View>
                <View><Text>hello world!</Text></View>
                <View><Text>hello world!</Text></View>
            </View>

        );
    }
};

AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);

View Layout(视图布局)

布局涉及到的就是 宽、高、多个同级元素保持同一行(inline)、自适应宽、内间距、外间距、横向居中、竖向居中、向左居中、向右剧中、固定位置、，另外react native还提供了一种==自适应高==。
所有布局的详细参数，请参考react native官网提供的说明文档。

宽和高 引用官方源码

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

class FixedDimensionsBasics extends Component {
    render() {
        return (
            <View>
                <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
                <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
                <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
            </View>
        );
    }
};

AppRegistry.registerComponent('rn_practice', () => FixedDimensionsBasics);

宽和高

多个同级元素保持同一行(inline) 引用官网源码

 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
 class FlexDirectionBasics extends Component {
     render() {
         return (
             <View style={{flex: 1, flexDirection: 'row'}}>
                 <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
                 <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
                 <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
             </View>
         );
     }
 };
 
 AppRegistry.registerComponent('rn_practice', () => FlexDirectionBasics);

多个同级元素保持同一行(inline)

自适应宽 引用官网源码

 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
 class FlexDimensionsBasics extends Component {
     render() {
         return (
             <View style={{flex: 1, flexDirection: 'row'}}>
                 <View style={{flex: 1, backgroundColor: 'powderblue'}} />
                 <View style={{flex: 2, backgroundColor: 'skyblue'}} />
                 <View style={{flex: 3, backgroundColor: 'steelblue'}} />
             </View>
         );
     }
 };
 
 AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);

自适应宽

自适应高 引用官网源码

 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
 class FlexDimensionsBasics extends Component {
     render() {
         return (
             <View style={{flex: 1}}>
                 <View style={{flex: 1, backgroundColor: 'powderblue'}} />
                 <View style={{flex: 2, backgroundColor: 'skyblue'}} />
                 <View style={{flex: 3, backgroundColor: 'steelblue'}} />
             </View>
         );
     }
 };
 
 AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);

自适应高

内间距(padding)

 import React, { Component } from 'react';
 import { AppRegistry, View, Text } from 'react-native';
 
 class FlexDimensionsBasics extends Component {
     render() {
         return (
             <View style={{flexDirection: 'row'}}>
                 <Text style={{paddingLeft: 100, paddingTop: 200}}>Hello World!</Text>
             </View>
         );
     }
 };
 
 AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);

内间距(padding)

外间距(margin)

 import React, { Component } from 'react';
 import { AppRegistry, View, Text } from 'react-native';
 
 class FlexDimensionsBasics extends Component {
     render() {
         return (
             <View style={{flex: 1}}>
                 <View style={{margin: 100, width: 200, height: 200, backgroundColor: 'white'}}>
                     <Text>Box 1</Text>
                     <View style={{margin: 30, backgroundColor: 'powderblue'}}>
                         <Text>Box 2</Text>
                     </View>
                 </View>
             </View>
         );
     }
 };
 
 AppRegistry.registerComponent('rn_practice', () => FlexDimensionsBasics);

外间距(margin)

对齐(align)

采用html的方式来实现向右对齐

 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
 class JustifyContentBasics extends Component {
     render() {
         return (
             <View>
                 <View style={{width: 50, height: 50, backgroundColor: 'powderblue', position: 'absolute', right: 0}} />
             </View>
         );
     }
 };
 
 AppRegistry.registerComponent('rn_practice', () => JustifyContentBasics);

采用flexDirection实现
row-reverse其实并非一种常规的向右对齐，而是反向对齐。

 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
 class JustifyContentBasics extends Component {
     render() {
         return (
             <View style={{flexDirection: 'row-reverse'}}>
                 <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
             </View>
         );
     }
 };
 
 AppRegistry.registerComponent('rn_practice', () => JustifyContentBasics);

采用flexDirection+justifyContent

 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
 class JustifyContentBasics extends Component {
     render() {
         return (
             <View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
                 <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
             </View>
         );
     }
 };
 
 AppRegistry.registerComponent('rn_practice', () => JustifyContentBasics);

向右对齐

上述三种都是向右对齐的例子，更多、更灵活的方法，请参考mozilla公司定义的flex-Direction、justify-Content标准。

mozilla justifyContent

固定位置

 import React, { Component } from 'react';
 import { AppRegistry, View } from 'react-native';
 
 class JustifyContentBasics extends Component {
     render() {
         return (
             <View style={{flex: 1}}>
                 <View style={{width: 50, height: 50, backgroundColor: 'powderblue', 
                 position: 'absolute', right: 100, bottom: 100}} />
             </View>
         );
     }
 };
 
 AppRegistry.registerComponent('rn_practice', () => JustifyContentBasics);

固定位置

文本竖向居中

 import React, { Component } from 'react';
 import {View, AppRegistry, Text} from 'react-native';
 
 class Bananaes extends Component {
     render() {
         return (
             <View style={{height: 80, margin: 130, width: 80}}>
                 <View style={{flex: 1, backgroundColor: "teal", justifyContent: 'center'}}>
                     <Text>Hello</Text>
                 </View>
             </View>
         )
     }
 }
 
 AppRegistry.registerComponent('rn_practice', () => Bananaes);

文本竖向居中

文本横向居中

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

class Bananaes extends Component {
    render() {
        return (
            <View style={{height: 80, margin: 130, width: 80}}>
                <View style={{flex: 1, backgroundColor: "teal", alignItems: 'center'}}>
                    <Text>Hello</Text>
                </View>
            </View>
        )
    }
}

AppRegistry.registerComponent('rn_practice', () => Bananaes);

文本横向居中

文本横向竖向居中

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

class Bananaes extends Component {
    render() {
        return (
            <View style={{height: 80, margin: 130, width: 80}}>
                <View style={{flex: 1, backgroundColor: "teal", alignItems: 'center', justifyContent: 'center'}}>
                    <Text>Hello</Text>
                </View>
            </View>
        )
    }
}

AppRegistry.registerComponent('rn_practice', () => Bananaes);

文本横向居中

react-native--05界面布局

View(视图)

multiView(多个视图)

View Layout(视图布局)

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React native