五、React 开发三种流传

最新推荐文章于 2020-08-30 17:03:02 发布

原创最新推荐文章于 2020-08-30 17:03:02 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在React Native中分离组件与样式，通过实例演示如何创建可复用的组件并应用样式，同时展示了官方组件的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、外部（组件+样式）+官方组件



index.js页面

//一、如果都写在index.ios文件中比较乱。在单独的一个文件中定义组件，使用Module.exports将组件导出为独立的模块。可以在其他文件中引用。

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


// 三步骤   1、定义组件 2、定义组件样式      导出组件

//定义组件
var Header=React.createClass({

  render:function(){
    return (
      <View styles={styles.container}>
        <Text styles={styles.fontinfo}>布局</Text>
      </View>
    )
  }
});

//组件样式
var styles=StyleSheet.create({
  //层view
  container:{
    backgroundColor: "red",  //中间没有横杆 脱空命名法
    width:300,
    height:400,
  },
  fontinfo:{
    backgroundColor:"green",
    width:300,
    height:400,
  },
});
//导出模块
module.exports = Header;





header.js页面

//一、引入  二、使用

var Header =require("./header");
//定义一个渲染容器。
var Header=React.createClass({
  render:function(){
    return (
      <View styles={styles.container}>
            {/* Header使用 */}
            <Header></header>
      </View>
    )
  }
});

二、（组件+样式）+官方组件

//一、在js 文件内写  引入官方组件
import React,{Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  view
} from 'react-native';

/*二、在Web开发中,div是最重要的一个元素,是页面布局的基础。
在ReactNative开发中,View组件的作用类似于div。是最基本的组件,被看作是容器组件。*/
//三、、定义组件
var LessonStyle=React.createClass({
  render:function(){
    return (
      <View styles={styles.container}>
        <Text styles={styles.fontinfo}>布局</Text>
      </View>
    )
  }
});
//四、定义样式
var styles=StyleSheet.create({
  //层view
  container:{
    backgroundColor: "red",  //中间没有横杆 脱空命名法
    width:300,
    height:400,
  },
  fontinfo:{
    backgroundColor:"green",
    width:300,
    height:400,
  }
});

AppRegistry.registerComponent('LessonStyle',()=>LessonStyle);  //ios 调试注册模拟作用