天津营销网站建设联系方式,佛山 做网站公司,漯河北京网站建设,免费cmsReact 与 React Native 区别
同样的实现一个点击按钮#xff0c;更换姓名和年龄的值的功能。两部分代码不同
React代码
import React, { useState } from react
import ./Button.cssexport function UseStateWithoutFunc() {const [name, setName] useState(何遇)const [a…React 与 React Native 区别
同样的实现一个点击按钮更换姓名和年龄的值的功能。两部分代码不同
React代码
import React, { useState } from react
import ./Button.cssexport function UseStateWithoutFunc() {const [name, setName] useState(何遇)const [age, setAge] useState()function onChange() {setName(张三) // 修改namesetAge(23) // 修改age}return (div className{nameButton}姓名: {name}/divdiv className{ageButton}年龄: {age undefined ? 未知 : age}/divbutton 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(张三); // 修改namesetAge(23); // 修改age}return (ViewText style{styles.nameButton}姓名: {name}/TextText style{styles.ageButton}年龄: {age undefined ? 未知 : age}/TextButton titlePress 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事件。
