React Native - (一) 瞭解文件結構

本文CSDN地址

本文有道地址

下一篇 React Native - Props屬性和State狀態

ReactNative 基礎開發

• 基礎前端開發知識
• Node.js基礎
• JSX語法基礎
• Flexbox佈局

瞭解文件結構

App.js

React Native 下面例舉了一些已經具備的內置組件：

import {
  Platform,
  StyleSheet,
  Text,
  View,
  TabBarIOS
} from 'react-native';

通過 improt 引入該組件，比如我們頁面上需要顯示文本，我們則使用 <Text>Hello world!</Text>。

常量對象的定義和擴展

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

定義App.js類的組件

import React, { Component } from 'react'; //1.

export default class App extends Component<{}> { //2.
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          123{this.props.text}123
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }

1. Component 模塊則是用來告知當前類具備封裝成一個組件的能力。
2. 組件的封裝及頁面的定製。
3. render 方法中返回一些用於渲染結構的 JSX 語句。
4. extends 擴展

index.js

import { AppRegistry } from 'react-native';//1
import App from './App';//3

AppRegistry.registerComponent('XXXXX', () => App);//2

1. AppRegistry 模塊則是用來告知 React Native 哪一個組件被註冊爲整個應用的根容器。
2. 你無需在此深究，因爲一般在整個應用裏 `AppRegistry.registerComponent 這個方法只會調用一次。
3. 導入名爲App的組件，也就上述提到的App.js。