小编Eva*_*nss的帖子
React Native 中 onLayout 事件的 TypeScript 类型？
如何在 TypeScript 中为 React Native 的 onLayout 事件指定类型？
const handleOnLayout = (e: SomeTypeHere) => {
// stuff
};
<View onLayout={handleOnLayout}>
<Text>Hi</Text>
</View>
推荐指数
解决办法
查看次数
带有 SVG 颜色渐变的圆形进度指示器？
我需要制作一个带有颜色渐变的圆形进度指示器。我还需要将进度圈的“末端”四舍五入。这张图片包含了我想要实现的一切：
这段代码很接近，但没有颜色渐变：
https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/OJybqza
var control = document.getElementById('control');
var progressValue = document.querySelector('.progress__value');
var RADIUS = 54;
var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
function progress(value) {
var progress = value / 100;
var dashoffset = CIRCUMFERENCE * (1 - progress);
console.log('progress:', value + '%', '|', 'offset:', dashoffset)
progressValue.style.strokeDashoffset = dashoffset;
}
control.addEventListener('input', function(event) {
progress(event.target.valueAsNumber);
});
progressValue.style.strokeDasharray = CIRCUMFERENCE;
progress(60);.demo {
flex-direction: column;
display: flex;
width: 120px;
}
.progress {
transform: rotate(-90deg);
}
.progress__meter,
.progress__value {
fill: none;
} …推荐指数
解决办法
查看次数
如何使用 Expo web (React Native Web) 进行代码拆分？
在 Expo 网络项目中是否有推荐的代码拆分方法？
我在文档中找不到任何内容，即使在网页性能页面上：https : //docs.expo.io/guides/web-performance/
我很惊讶，因为这是很多（可能是大多数）网络应用程序想要做的事情。如果它不受官方支持，是否有解决方法？
推荐指数
解决办法
查看次数
语音合成在移动 Safari 上不起作用，即使它受支持
我正在尝试使用语音合成 API。它适用于桌面浏览器和移动 Chrome，但不适用于移动 Safari。
const msg = new SpeechSynthesisUtterance("Hello World");
window.speechSynthesis.speak(msg);
我添加了一个小测试，似乎 Safari 支持该 API，这可能是权限问题导致它不起作用吗？
if ("speechSynthesis" in window) {
alert("yay");
} else {
alert("no");
}
推荐指数
解决办法
查看次数
部署 Expo Web 项目时将文件添加到 Web 根目录吗？
当我部署 Expo Web 项目（Apple 应用程序站点关联文件）时，我需要将一个文件添加到 Web 根目录。
Expo 开箱即用地支持此功能吗？
推荐指数
解决办法
查看次数
为 NextJS 中的所有页面设置默认 Head？
您可以为 NextJS 中的组件设置一个默认值，Head以便其他页面从中扩展吗？
就我而言，我需要在每个页面上加载字体：
<Head>
<link
href="path-to-font"
rel="stylesheet"
/>
</Head>
我可以使用自定义文档文件来完成此操作，但默认值Head似乎更简单。
推荐指数
解决办法
查看次数
NextJS 的 getServerSideProps 中的 Apollo 查询？
我将 NextJS 与 Apollo 一起使用。文档没有说太多，但指向这个存储库：https://github.com/vercel/next.js/tree/canary/examples/with-apollo
其中使用此代码：
export async function getStaticProps() {
const apolloClient = initializeApollo()
await apolloClient.query({
query: ALL_POSTS_QUERY,
variables: allPostsQueryVars,
})
return {
props: {
initialApolloState: apolloClient.cache.extract(),
},
unstable_revalidate: 1,
}
}
我发现这很丑，所以我尝试使用钩子：
const res = useQuery(ALL_POSTS_QUERY);
但我收到一个错误：
错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：
那么你不能在getStaticPropsand里面使用钩子吗getServerSideProps？如果是这样，是否有更好的语法来进行 GraphQL 查询？
推荐指数
解决办法
查看次数
使用 Storybook 将 .stories 文件导入另一个 .stories 文件？
您可以使用 Storybook 将一个 .stories 文件导入到另一个 .stories 文件中吗？
例如我有
/component1/component1.tsx
/component1/component1.stories.tsx
/component2/component2.tsx
/component2/component2.stories.tsx
我还想为我的所有组件讲一个故事：
在/all-components/all-components.stories.tsx
import * as React from 'react';
import Component1Story from '../component1/component1.stories.tsx';
import Component2Story from '../component2/component2.stories.tsx';
export const Test = () => {
return (
<div>
<Component1Story />
<Component2Story />
</div>
);
};
export default {
title: 'Components',
};
我收到此错误：
元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。
检查 的渲染方法
storyFn。
推荐指数
解决办法
查看次数
忽略 React 中的某些控制台错误/警告？
我的应用程序中出现了大量这样的控制台错误：
警告：React 无法识别
textStyleDOM 元素上的prop。如果您有意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写textstyle。如果您不小心从父组件传递了它，请将其从 DOM 元素中删除。
理想情况下，我会修复错误，但遗憾的是这是不可能的，因为我使用的是带有样式组件的样式系统：https : //github.com/styled-system/styled-system/issues/1044
作为一种不太理想的解决方法，我想禁用 React 开发版本的控制台中的某些错误。这能做到吗？
不确定这是否重要，但我使用的是 React Native Web。
推荐指数
解决办法
查看次数
Pan Responder 在更新父组件的状态时只触发一次？
我正在使用 React Native 的 Pan Responder。当拖动其子项中的 Pan Responder 时，我需要更新父项中的某些状态。
复杂的一点是我还需要这些孩子将他们自己的元素插入可拖动区域。
对于上下文，这里是一个更简单的例子，可以正常工作 https://snack.expo.io/@jamesweblondon/drag-items
import * as React from 'react';
import { useRef, useState } from 'react';
import { Text, View, PanResponder } from 'react-native';
const items = ['1', '2', '3'];
const ITEM_HEIGHT = 100;
const Parent = () => {
const [y, setY] = useState(0);
const [index, setIndex] = useState(null);
return (
<View style={{ marginTop: 50 }}>
<Text>Index: {index}</Text>
<Text>Y: {y}</Text>
<View
style={{ height: ITEM_HEIGHT * items.length, backgroundColor: 'gold' }}>
{items.map((item, …推荐指数
解决办法
查看次数
标签 统计
expo ×2
next.js ×2
react-native ×2
apollo ×1
javascript ×1
reactjs ×1
storybook ×1
svg ×1
typescript ×1