react native 样式初学～（一）

最近看到了一个新技术～～react native～～

貌似国内还很少～～于是我就也来学学～～

这篇一类文章记录我学习react native的过程

安装react native很简单～～貌似网上这个教程还是蛮多的～～

自己去找就好了，如果实在不会留言给我，我再写写装的过程～～

react native的第一个hello world代码很简单～～

贴出如下

/**
* Sample React Native App
* https://github.com/facebook/react-native */
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';

class hellodk extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.titlem}>
测试01!
</Text>
<Text style={styles.instructions}>
这是ios测试
</Text>
<Text style={styles.instructions}>
第一次写react native见谅
</Text>
</View>
);
}
}
// 创建一个样式表
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
titlem: {
fontSize: 20,
textAlign: 'center',
fontWeight: 'bold',//加粗
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

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

如上代码中包含了两个组件一个是view，一个是text

首先是view的样式

在这个网址里react native

简单说一下 view可以用里面的那些样式来控制～

text的样式如下～～也是可以用view的一些样式～～写控件的时候可以翻看一下

//text的样式如下
color string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
letterSpacing number
lineHeight number
textAlign enum("auto", 'left', 'right', 'center', 'justify')
textDecorationLine enum("none", 'underline', 'line-through', 'underline line-through')
textDecorationStyle enum("solid", 'double', 'dotted', 'dashed')
textDecorationColor string
writingDirection enum("auto", 'ltr', 'rtl')

如上样式可以配置到样式表中～～