React 与 React Native 区别

阳光穿透心脏的1/2处 2024-02-20 13:08 7阅读 0赞

## 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代码

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事件。