美文网首页
React-Native 做一块砖(组件)_5

React-Native 做一块砖(组件)_5

作者: Jniying | 来源:发表于2016-09-08 23:13 被阅读9次
    RN自己理解面对组件开发.每一个组件就是由多个盒子组成的一个盒子.把整个app比作一个间房子的话.那么一个组件相当于一块砖.那么在搬砖之前,先把砖做出来:

    创建一个MainView 组件

    import React, {Component} from 'react';
    import {    
          StyleSheet,
          Text,    
          View,
    } from 'react-native';
    
    MainView extends Component {   
         render() {       
               return (          
                        <View style={styles.superStyle}>                      
                                  <Text>我是一块砖</Text>            
                      </View>     
              )    
          }
    }
    const styles = StyleSheet.create({    
              superStyle:{      
                  flex:1,
                  backgroundColor: 'red',              
                  justifyContent:'center',  
            },
    })
    //把该组件开放
    module.exports = MainView 
    

    在使用的js文件

    //引入组件
    var MainView = require('./mainView');
    //使用
    export default class flexDemo extends Component {       
             render() {   
                     return ( 
                        //创建该组件
                           <MainView/>      
                    )   
           }
    }
    

    相关文章

      网友评论

          本文标题:React-Native 做一块砖(组件)_5

          本文链接:https://www.haomeiwen.com/subject/pfdjettx.html