在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);文本横向居中
网友评论