React-Native入门指南：深入理解JSX在React-Native中的应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00425/article/details/148549516

React-Native入门指南：深入理解JSX在React-Native中的应用

react-native-lesson React-Native入门指南项目地址: https://gitcode.com/gh_mirrors/re/react-native-lesson

前言

在React-Native开发中，JSX是一个非常重要的概念。本文将从技术专家的角度，系统性地讲解JSX在React-Native中的应用，帮助开发者更好地理解和使用这一语法特性。

什么是JSX？

JSX是JavaScript XML的缩写，它是一种JavaScript的语法扩展。在React-Native中，JSX允许我们在JavaScript代码中编写类似HTML的标记语言，用于描述UI组件的结构和外观。

为什么使用JSX？

直观性：JSX让UI组件的结构更加直观，类似于HTML，降低了学习成本
高效性：相比纯JavaScript创建元素的方式，JSX代码更加简洁
表达能力：可以方便地表达组件之间的层级关系
类型安全：结合TypeScript或Flow，可以提供更好的类型检查

JSX基础语法

1. 基本结构

在React-Native中，一个典型的JSX结构如下：

render() {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Welcome to React Native!
      </Text>
    </View>
  );
}

这里需要注意：

组件名称首字母必须大写（View、Text）
每个组件必须有闭合标签
最外层只能有一个根元素

2. 表达式嵌入

JSX中可以使用{}包裹任意JavaScript表达式：

render() {
  const greeting = 'Hello World';
  return (
    <View>
      <Text>{greeting}</Text>
      <Text>{new Date().toLocaleTimeString()}</Text>
      <Text>{1 + 2 + 3}</Text>
    </View>
  );
}

3. 属性传递

JSX中的属性传递有多种方式：

基本属性传递

<Image source={require('./img.png')} resizeMode="cover" />

展开属性

const props = {source: require('./img.png'), resizeMode: 'cover'};
<Image {...props} />

动态覆盖属性

<Image {...props} resizeMode="contain" />

样式处理

React-Native中的样式处理与Web开发有所不同，以下是几种常见的样式写法：

1. 内联样式

<View style={{backgroundColor: 'red', flex: 1}} />

2. 样式表引用

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

<View style={styles.container} />

3. 样式组合

<View style={[styles.container, {padding: 20}]} />

4. 条件样式

<View style={[
  styles.base,
  this.state.active && styles.active
]} />

组件属性校验

React-Native提供了PropTypes来进行属性类型校验：

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    onPress: PropTypes.func
  };
  
  // ...
}