React Native 简介与基础-样式

Posted aikongmeng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React Native 简介与基础-样式相关的知识，希望对你有一定的参考价值。

React Native 简介与基础 1.3 样式

React Native 组件的样式使用了类似于 CSS 的样式规则，但是使用的是 javascript 对象而不是文本字符串。以下是一个使用样式的示例

import React from 'react';
import  StyleSheet, Text, View  from 'react-native';

const styles = StyleSheet.create(
  container: 
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  ,
  text: 
    fontSize: 20,
    fontWeight: 'bold',
    color: '#000',
  ,
);

const HelloWorld = () => 
  return (
    <View style=styles.container>
      <Text style=styles.text>Hello, World!</Text>
    </View>
  );
;

export default HelloWorld;

上述代码中，我们定义了一个名为 styles 的样式对象。该对象包含了两个样式规则：container 和 text。container 规则用于定义一个居中对齐的容器，text 规则用于定义文本的样式。在 和 元素中，我们使用了 style 属性来引用样式规则。
注意，在使用样式时，属性名称使用驼峰命名法而不是连字符分隔。

练习题1.3：

  1. 创建一个名为 MyButton 的组件，该组件具有自定义样式和一个 onPress 属性，当按下按钮时，将在控制台中输出一条消息。组件的样式应至少包含背景颜色和文本颜色。
  2. 在一个新的组件MyView 中，使用 MyView 组件，并在该组件中呈现一个自定义文本和一个默认的 MyView 样式。

参考答案：
1.

import React from 'react';
import  StyleSheet, TouchableOpacity, Text  from 'react-native';

const MyButton = ( onPress, label ) => 
  return (
    <TouchableOpacity style=styles.button onPress=onPress>
      <Text style=styles.label>label</Text>
    </TouchableOpacity>
  );
;

const styles = StyleSheet.create(
  button: 
    backgroundColor: '#4CAF50',
    padding: 10,
    borderRadius: 5,
  ,
  label: 
    color: '#fff',
    fontWeight: 'bold',
    textAlign: 'center',
  ,
);

export default MyButton;


import React, useState from 'react';
import 
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  TextInput,
 from 'react-native';
import CheckBox from '@react-native-community/checkbox';

const MyView = () => 
  const [isSelected, setSelected] = useState(false);
  return (
    <View style=styles.container>
      /* 添加一张图片 */
      <Image
        source=uri: 'https://reactnative.dev/img/tiny_logo.png'
        style=styles.image
      />

      /* 添加一个文本输入框 */
      <TextInput style=styles.textInput placeholder="请输入文本" />

      /* 添加一个按钮 */
      <TouchableOpacity style=styles.button>
        <Text style=styles.buttonText>确定</Text>
      </TouchableOpacity>

      /* 添加一个复选框 */
      <View style=styles.checkBoxContainer>
        <CheckBox value=isSelected onValueChange=setSelected />
        <Text style=styles.checkBoxLabel>我已阅读并同意条款</Text>
      </View>
    </View>
  );
;

const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  ,
  image: 
    width: 50,
    height: 50,
    marginBottom: 20,
  ,
  textInput: 
    borderWidth: 1,
    borderColor: '#999',
    borderRadius: 4,
    paddingVertical: 8,
    paddingHorizontal: 12,
    marginBottom: 20,
    width: '80%',
  ,
  button: 
    backgroundColor: 'blue',
    borderRadius: 4,
    paddingVertical: 10,
    paddingHorizontal: 20,
  ,
  buttonText: 
    color: '#fff',
    fontWeight: 'bold',
    textAlign: 'center',
  ,
  checkBoxContainer: 
    flexDirection: 'row',
    alignItems: 'center',
  ,
  checkBoxLabel: 
    marginLeft: 8,
  ,
);

export default MyView;

上面是一个简单的React Native组件，其中包含了一个图片、一个文本输入框、一个按钮和一个复选框。

首先，我们使用StyleSheet.create方法创建了一个样式表。在样式中，我们定义了组件的各个元素（包括图片、文本输入框、按钮和复选框）的样式属性。

接着，我们定义了一个名为MyView的组件，并在其中使用了React Native的基本组件来创建UI界面。在这里，我们导入了CheckBox组件，以支持复选框的功能。在MyView组件中，我们使用useState钩子来定义一个状态变量isSelected，表示该复选框是否被选中。然后，我们在View内部渲染了一个图片、一个文本输入框、一个按钮和一个复选框，并将isSelected状态变量和setSelected函数绑定到了复选框上。

最后，我们将样式表作为组件的样式属性传递给View组件，以应用所定义的样式。

useState
使用useState函数可以让我们在函数组件中方便地管理组件的状态，并且不需要编写类似this.setState()方法的代码。它是React Hooks的重要组成部分，使得React函数组件具有了与类组件一样的状态管理功能。

React Native学习提纲

当前版本最后修订日期： 2015年10月21日

版本日期说明作者
1.0 2015-10-21 创建文档 罗晴明

一、 React.js入门基础

1.基础HTML/CSS与基础开发工具使用

  • html基础
    doctype、常用标签、标签闭合、自定义属性
  • css基础
    选择器（id、class）、常用样式、样式覆盖、行内样式、绝对与相对定位、flexbox布局
  • 基础开发工具
    使用Chrome调试网页、使用Webstorm编辑代码、使用github管理代码与搜索问题

2.基础Javascript与Node知识

  • Javascript基础（ES5）
    基本编码风格与习惯、基本数据类型及转换、数组与对象的操作、函数的定义与使用、引用与深复制、dom操作、ajax
  • Node基础
    Node与浏览器环境的差异、nvm、CommonJS规范、require/export等语句的使用、npm基础命令的使用、package.json配置

3.react.js基础

  • ES6基础
    webpack/babel基础配置、箭头函数、class继承、模块导入导出、解构、const与let声明、promise、默认参数、展开运算符(...obj)、Map/Set
  • react.js基础实践
    vmdom基础概念、jsx语法与注意事项、component生命周期与适用场景、事件代理、强制设置innerHTML、不可控组件问题（input）、ref的使用、state与props、ajax/fetch、组件嵌套与复用、尝试编写交互式界面如tabbar

4.react.js进阶

  • react.js进阶实践
    父子组件间通讯（props、context、回调、暴露接口）、任意组件间通讯（flux思想）、redux框架、react-router框架、代码质量控制（flow、eslint、propTypes、mocha/karma/jasmine/jest）、搜索与使用第三方组件、PureRenderMixin、immutable.js

二、 React Native入门基础

1.开发环境搭建

  • 科学上网
  • iOS开发环境搭建
    Mac OS X、XCode、Homebrew、命令行基础(sudo、chown等)、watchman、iOS模拟器的使用
  • Android开发环境搭建(Windows)
    //TODO
  • Android编译与打包工具链
    //TODO

三、 实战开发

1.样式与布局

  • 样式
    样式的组织、复用、覆盖、局限
  • 布局
    flexbox布局、绝对定位布局

2.基础实践

  • 常用基础组件
    View、Text、Image、TouchableX、WebView、TextInput等
  • 常用复杂组件
    Navigator、TabBar、Modal、ListView/ScrollView等
  • 常用API
    相册、地理定位、fetch、timer、AsyncStorage、Dimensions、Alert/Toast等

四、 进阶技巧与最佳实践

1.复杂交互界面
Animated、LayoutAnimation、InteractionManager、requestAnimationFrame、setImmediate/setTimeout、PanResponder

2.整合/编写原生模块
XCode与Android Studio的基本使用、Native Modules、Native UI Components、jsBridge、回调、事件订阅

以上是关于React Native 简介与基础-样式的主要内容，如果未能解决你的问题，请参考以下文章

React Native学习提纲

零Node基础看懂React-Native脚手架工具

AvocadoJS入门

reac-native环境搭建

react native 问题点

是否可以将 Material UI 库与 React Native 一起使用？