最近看到了一个新技术~~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')
如上样式可以配置到样式表中~~
热门评论
-
辣牛2017-11-15 0
-
劫12016-10-16 0
-
NARUTO丶阳2016-07-22 0
查看全部评论你好,我想问下用android studio新建了一个项目,现在也可以已经连接genymotion,可以看到页面,还需要react-native run-android吗,我运行了这句代码,报错这个 Android project not found. Maybe run react-native android first?
你好,问一下那个pash环境变量在win10下面要怎么设置,和设置什么啊
写的真烂,还不如去看movie fetch