RN的第一個API-----注冊組件Appregistry


首先解釋下AppRegistry是JS運行所有React Native應用的入口  什么是入口?

1.在我們初始化一個react native項目的時候 默認的index.ios.js/index.ios.js里面的內容是這這樣的  

(這里我們簡化一下代碼)

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class Allen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

});

AppRegistry.registerComponent('Allen', () => Allen);

  

這段代碼中系統自動創建了一個組件叫做Allen 然后這個組件會被Appregistry 這個API的注冊函數顯示出來。

   帶雙引號的這個“Allen”代表的是這個APP的名稱 后面的Allen代表的是所要顯示的組件名稱, 那么我們就可以在創建一個xxx.js文件 (在react-native中一個文件也是一個組件) 那么我們就可以將這個組件注冊到這里來 則可以顯示這個js所呈現的內容  

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import NextPage  from './NextPage'
AppRegistry.registerComponent('Allen', () => NextPage );  //注冊組件

  

import React, { Component } from 'react';//導入react的組建
import {//需要的組建導入
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableHighlight
} from 'react-native';





export default class HelloPage extends Component {  //注意:注冊的組件只是注冊一次 和組件名稱無關  和文件組件名稱有關
  constructor(props) {
    super(props)

  }

  render(){
    const {navigator} = this.props;
    return(
      <View style={{padding:50,borderWidth:1,}}>
       
          <Text style={{fontSize:50,}}>sds'd'f'd'sds</Text>
      </View>
    )
  }
}

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM