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

      

  • 相关阅读:
    monkey事件简介
    Monkey简介
    Package与Activity简介
    adb 命令
    安卓模拟器简介
    iis重启的几种方法
    window下安装FTP服务器
    防止dedecms注入文件挂马的解决方法
    织梦漏洞可疑PHP文件/article文件夹
    织梦Dedecms系统可疑文件include/filter.inc.php扫描出漏洞,该如何解决?
  • 原文地址:https://www.cnblogs.com/allenxieyusheng/p/5775308.html
Copyright © 2020-2023  润新知