React Native的使用

简介

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
    }
});
复制代码