简介
React Native 是一个 JavaScript的框架,用来撰写实时的、可原生呈现 iOS 和 Android 的应用。React Native 也只是React,它是针对移动设备而言的。也有少许语法不同的地方,比如开发者需要使用<View>
组件而不是<div>
,<Image>
代替<img>
。
环境配置
brew install node
brew install watchman
npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
下载Xcode
运行结果语法
//可以引入原生组件
import { AppRegistry, StyleSheet, Text } from 'react-native';
//创建组件方式不同
export default class Index extends Component {
constructor() {
super();
this.state = {
selectedTab: '个人中心',
}
}
render() {
return (
<View style={styles.container}>
</View>
);
}
}
//React Native中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点:
const styles = StyleSheet.create({
tabContent: {
flex: 1,
alignItems: 'center'
},
tabText: {
color: '#000',
margin: 50
}
});
样式
内部样式使用
export default class Styles extends Component {
render() {
return (
<View>
<Text style={styles.tabContent}>just red</Text>
<Text style={styles.tabText}>just bigBlue</Text>
</View>
);
}
}
//内部样式
const styles = StyleSheet.create({
tabContent: {
flex: 1,
alignItems: 'center'
},
tabText: {
color: '#000',
margin: 50
}
});