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
    }
});
複製代碼