zoukankan      html  css  js  c++  java
  • React Native商城项目实战01

    1.创建项目

    $ react-native init BuyDemo
    

    2.导入图片资源

    安卓:把文件夹放到/android/app/src/main/res/目录下,如图: 

    iOS: Xcode打开工程,把图片拖动到Images.xcassets里

    3.根据实际需求,组织项目结构,目的是更加清晰 

     

    4.Main.js

    /**
     * 主页面
     */
    import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View
    } from 'react-native';
    
    // ES5
    var Main = React.createClass({
        render() {
            return (
                <View style={styles.container}>
                    <Text style={styles.welcome}>
                        Main
                    </Text>
                </View>
            );
        }
    });
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
        welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
        },
    });
    
    // 输出
    module.exports = Main;
    

    5.index.android.js 引入Main.js并使用这个组件

    /**
     * android
     */
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    
    /*==============导入外部组件================*/
    var Main = require('./Component/Main/Main');
    
    class BuyDemo extends Component {
        render() {
            return (
                <Main />
            );
        }
    }
    
    const styles = StyleSheet.create({
    });
    
    AppRegistry.registerComponent('BuyDemo', () => BuyDemo);
    

    6.效果图

    .

  • 相关阅读:
    Android中设置APP应用字体不缩放,文字不随系统字体大小变化
    day02 作业
    day01
    2018.11.2
    2018.11.1
    2018.10.25
    2018.10.24
    2018.10.23
    2018.10.20
    2018.10.19学习总结
  • 原文地址:https://www.cnblogs.com/crazycode2/p/7291187.html
Copyright © 2011-2022 走看看