React
React
十月ooOO
精通 JS/CSS/HTML,做点有用的东西。
展开
-
React 在 function 类型的组件中(component)如何让方法只执行一次
React 在 function 类型的组件中(component)如何让方法只执行一次Class 类型的组件中有对应的生命周期方法 componentDidLoad 等,可以将只执行一次的方法放在这里面,但 function 类型的组件该如何实现只执行一次的方法呢?首先你需要知道在使用 useEffect 的时候,如果没有指定筛选的变量,它会在每次变量变化时执行 useEffect 中的内容你需要知道的: useEffect 的使用下面的方法,会在组件内部任意变量变化时执行 useEffect原创 2022-03-14 11:00:18 · 2488 阅读 · 0 评论 -
React 列表数组内容更新,但列表不更新,如何解决,问题所在
React 列表数组内容更新,但列表不更新,如何解决,问题所在问题描述在写一个 ReactNative 项目的时候,列表渲染一个对象数组,数组结构如下const [projList, setProjList] = useState( [ { title: '嵌入式em1000 演示项目 - full', ip: '121.36.2.95/em1000/full/#/' }, {原创 2022-03-14 10:22:04 · 3768 阅读 · 1 评论 -
React 学习笔记
React 学习笔记一、组件的基础结构组件的声明跟普通的 js class 是一样的,也有 constructorclass Clock extends React.Component { constructor(props){ super(props) this.state= { clock: "" } } // 组件 mount 时 componentDidMount(){ } // 组件 unmount 时 componentWillUnmount(){原创 2022-03-08 09:35:17 · 3262 阅读 · 0 评论 -
React Native 使用 Router
React Native 使用 RouterReactNative 使用 Router https://github.com/react-navigation/react-navigation需要先后安装:"@react-navigation/native": "^6.0.8","@react-navigation/native-stack": "^6.5.0","react-native-safe-area-context": "^4.1.2","react-native-screens":原创 2022-03-03 17:33:59 · 589 阅读 · 0 评论 -
ReactNative 一些常用方面的常用插件,个人笔记
ReactNative 一些常用方面的常用插件,个人笔记最近才接触 ReactNative 这个东西,也是在使用中慢慢试探,需要什么了就学什么方面的内容。发现一些原本就存在于 ReactNative 体内的功能,都已经分离了出去,变成了官方插件类似的东西。比如,组件模块npm 中的官方插件名WebViewreact-native-webviewAsyncStorage@react-native-async-storage/async-storage当然这只是比较贴原创 2022-02-24 14:15:13 · 1804 阅读 · 0 评论 -
React 子组件向父组件传递事件的方式
React 子组件向父组件传递事件的方式React 中子组件向父组件传递事件的方式,跟 vue 有点不同。比如我有一个组件 FloatingButton,我需要点击它的时候,触发父类的事件父组件const [modalModal, setModalModal] = useState(false)<FloatingButton title={'添加'} onPress={setModalModal}/>子组件<TouchableHighlight style={styl原创 2022-02-24 13:53:12 · 2822 阅读 · 0 评论 -
ReactNative WebView 加载网址出错:net::ERR_CLEARTEXT_NOT_PERMITTED
ReactNative WebView 加载网址出错:net::ERR_CLEARTEXT_NOT_PERMITTED在开发时显示是正常的,但在 release 中的 apk 中却出错。原因是因为访问的是 http 而不是 https 网址。默认情况下 webView 是不允许直接访问非 https 的网址的解决办法在 android/app/src/main/AndroidManifest.xml 中 的 application 字段中添加android:usesCleartextTraffi原创 2022-02-23 16:12:34 · 706 阅读 · 0 评论 -
ReactNative 屏幕锁定横屏
ReactNative 屏幕锁定横屏参阅官方说明: https://reactnative.dev/docs/improvingux#screen-orientation-lockAndroid在项目的 android/app/src/main/AndroidMainfest.xml 的 activity 标签中添加属性,注意:是添加到 activity 标签中锁定横屏android:screenOrientation="landscape"锁定竖屏android:screenOrien原创 2022-02-23 13:50:53 · 1183 阅读 · 0 评论 -
ReactNative 使用 react-native-webview 不显示的问题:解决
ReactNative 使用 react-native-webview 不显示的问题:解决问题初用 ReactNative,在原有 demo 的基础上使用 `react-native-webview 的时候加载不出来,看国外的答案,意思是 webview 没有高度所以没有显示。const App: () => Node = () => { const isDarkMode = useColorScheme() === "dark"; return ( <原创 2022-02-23 11:25:33 · 3126 阅读 · 0 评论 -
RNCWebView was not found in theUIManager 错误解决
RNCWebView was not found in theUIManager 错误解决刚接触 ReactNative,需求是在其中嵌入一个 WebView 来显示一个网站。经过查看官方文档,说 ReactNative 的 WebView 已经弃用了,如果需要就引入外部的其它 webView 插件,也就是说 WebView 已经跟主体 ReactNative 分离了。官方的 WebView 插件是 react-native-webview https://github.com/react-nat原创 2022-02-23 11:18:25 · 2799 阅读 · 0 评论 -
ReactNative 遇到的问题 `Task :app:processDebugMainManifest FAILED`:解决
问题描述ReactNative 遇到的问题 Task :app:processDebugMainManifest FAILED原创 2022-02-22 16:03:13 · 2792 阅读 · 0 评论 -
React-Native 开发环境搭建
React-Native 开发环境搭建一、安装 AndroidStudio,安装 JDK, Android SDK二、设置 path添加 ANDROID_HOME = F:\Android\给 Path 添加 F:\Android\platform-tools三、新建一个 React Native 项目1. 新建一个 DemoApk 项目npx react-native init DemoApk2. 启动 Metronpx react-native start3. 启动程序npx原创 2022-02-22 14:45:19 · 891 阅读 · 0 评论 -
ReactNative 初始化
ReactNative 初始化之前走了很多弯路,各种问题,原来初始化有问题一、安装 ReactNativeClinpm i -g react-native-cli二、初始化应用比如新起一个项目叫 demonpx react-native init demo初始化之后,项目内容是这样的,npm 包也已经安装好了F:\github\demoλ lltotal 424drw-rw-rw- 2 Administrator 0 0 2021-08-13 13:34 __tes原创 2021-08-13 13:49:36 · 333 阅读 · 0 评论 -
ReactNative 运行时出错,Gradle 出错 Unsupported class file major version 60
ReactNative 运行时出错,Gradle 出错 Unsupported class file major version 60* What went wrong:Could not compile settings file 'F:\github\react-native-demo\android\settings.gradle'.> startup failed: General error during semantic analysis: Unsupported class f原创 2021-08-13 10:15:10 · 7423 阅读 · 1 评论