React Native的使用

657 阅读1分钟

简介

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
    }
});