React Native 第一天

来源：互联网发布：论文检测软件下载编辑：程序博客网时间：2024/06/13 18:55

1、React Native目录详解

_tests_ Test文件夹android 原生android的项目文件夹index.android.js android的工程文件或者入口文件index.ios.js ios的工程文件或者入口文件ios 原生ios的项目文件夹node_modules node模块的文件夹,如果我们后期需要安装一些第三方的模块,可以安装到这里package.json 项目/包的描述文件PS:学习RN最好的是不要离开文档,国内RN中文网是比较好的学习资料之一.

2、组件适配IOS和Android

由于RN是基于组件化变成的,所以在开发过程中某个模块通常被单独定义出来,示例如下:

首先创建Main.js文件

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';export default class Main extends Component {    render() {        return (            <View style={styles.container}>                <Text style={styles.welcome}>                    Welcome to React Native to ios and android!                </Text>                <Text style={styles.instructions}>                    To get started, edit index.ios.js                </Text>                <Text style={styles.instructions}>                    Press Cmd+R to reload,{'\n'}                    Cmd+D or shake for dev menu                </Text>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },    welcome: {        fontSize: 20,        textAlign: 'center',        margin: 10,    },    instructions: {        textAlign: 'center',        color: '#333333',        marginBottom: 5,    },});

然后在index.ios.js和index.android.js中引用:

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';//引入Main.jsimport Main from './Main';export default class ExampleCode extends Component {    render() {        return (            <Main/>        );    }}AppRegistry.registerComponent('ExampleCode', () => ExampleCode);

3、组件样式

RN中组件的样式分为两种,一种是外联式,一种是行内式:

外联式(写在本界面中的样式):

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';export default class Main extends Component {    render() {        return (            <View style={styles.container}>                <Text style={styles.welcome}>                    Welcome to React Native to ios and android!                </Text>                <Text style={styles.instructions}>                    To get started, edit index.ios.js                </Text>                <Text style={styles.instructions}>                    Press Cmd+R to reload,{'\n'}                    Cmd+D or shake for dev menu                </Text>            </View>        );    }}const styles = StyleSheet.create({    textStyle: {        color: '#fff'    },    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },    welcome: {        fontSize: 20,        textAlign: 'center',        margin: 10,    },    instructions: {        textAlign: 'center',        color: '#333333',        marginBottom: 5,    },});

外联式(以js文件的方式引入)

可以单独定义一个Styles.js

import {StyleSheet} from 'react-native';const styles = StyleSheet.create({    textStyle: {        color: '#fff'    },    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },    welcome: {        fontSize: 20,        textAlign: 'center',        margin: 10,    },    instructions: {        textAlign: 'center',        color: '#333333',        marginBottom: 5,    },});//输出export {styles as default};

然后在界面的js文件中去引用:

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';import styles from "./Styles";export default class Main extends Component {    render() {        return (            <View style={[styles.container, {backgroundColor: 'red'}]}>                <Text style={[styles.welcome, styles.textStyle]}>                    Welcome to React Native to ios and android!                </Text>                <Text style={styles.instructions}>                    To get started, edit index.ios.js                </Text>                <Text style={styles.instructions}>                    Press Cmd+R to reload,{'\n'}                    Cmd+D or shake for dev menu                </Text>            </View>        );    }}

行内式

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';export default class Main extends Component {    render() {        return (            <View style={{backgroundColor: 'red'}}>                <Text style={[styles.welcome, styles.textStyle]}>                    Welcome to React Native to ios and android!                </Text>                <Text style={styles.instructions}>                    To get started, edit index.ios.js                </Text>                <Text style={styles.instructions}>                    Press Cmd+R to reload,{'\n'}                    Cmd+D or shake for dev menu                </Text>            </View>        );    }}

阅读全文

0 0