React 与 React Native 区别

同样的实现一个点击按钮，更换姓名和年龄的值的功能。两部分代码不同

React代码

import React, { useState } from 'react'
import './Button.css'

export function UseStateWithoutFunc() {
    const [name, setName] = useState('何遇')
    const [age, setAge] = useState()

    function onChange() {
        setName('张三') // 修改name
        setAge(23) // 修改age
    }

    return (
        <>
            <div className={'nameButton'}>姓名: {name}</div>
            <div className={'ageButton'}>年龄: {age === undefined ? '未知' : age}</div>
            <button onClick={onChange}>click</button>
        </>
    )
}

Button.css样式

.nameButton {
    font-size: 30px;
}
.ageButton{
    font-size: 20px;
}

React Native代码

javascript">import React, {useState} from 'react';
import {Text, Button, View, StyleSheet} from 'react-native';

export function UseStateWithoutFunc() {
  const [name, setName] = useState('何遇');
  const [age, setAge] = useState();

  function onChange() {
    setName('张三'); // 修改name
    setAge(23); // 修改age
  }

  return (
    <View>
      <Text style={styles.nameButton}>姓名: {name}</Text>
      <Text style={styles.ageButton}>
        年龄: {age === undefined ? '未知' : age}
      </Text>
      <Button title="Press me" onPress={() => onChange()} />
    </View>
  );
}

const styles = StyleSheet.create({
  nameButton: {
    fontSize: 30,
  },
  ageButton: {
    fontSize: 20,
  },
});

export default UseStateWithoutFunc;

区别点：

• 样式编写：
  • React 的样式编写是通过css样式选择器。可以通过对某个id、某个className来进行标记识别，然后在另一个css文件里编写对应的样式
  • React Native的样式编写一般是通过在当前文件里通过在StyleSheet.create里声明对应的样式对象，然后在对应控件里的style选择相应的样式对象
• UI控件
  • React 的UI控件和 React Native的UI控件来源不同，比如要显示文字，在React Native里必须用Text控件包裹起来，但是在React里可以直接在div标签中写。以及React的button控件有onclick事件，但是React Native的button只有onPress事件。