草庐IT

react-Native

全部标签

javascript - 如何使用服务器渲染 + 流在 React 中管理标题、元标记等?

有些图书馆管理标签,例如:react-helmetreact-document-titlereact-doc-meta但是所有这些库都在服务器渲染上共享相同的API:Rewind。您首先使用renderToString()生成组件树然后你调用library.rewind()得到数据。当你使用react-dom-stream时问题就来了流式传输组件树而不是将它们呈现为字符串。你不能rewind因为流还没有被消费,当它被消费时,为时已晚。这里应该实现什么方法? 最佳答案 不幸的是,正确呈现元标记的一般要求意味着您首先必须准备好主要内容,

javascript - React Router V4 使用 Redux-persist 和 React-snapshot 保护私有(private)路由

我正在使用ReactRouter实现私有(private)路由Route组件:functionPrivateRoute({component:Component,authed,emailVerified,...rest}){return(authed===true?:}/>)}预期行为:authed通过使用redux-persist通过页面刷新持久保存所以在页面刷新或重新加载时,如果authedProp是true那么路由器应该呈现从来没有去路径"/"问题所在的实际行为:与authed===true(坚持)重新加载页面或刷新页面会导致发生以下操作(选中reduxdevtools)那个行动

javascript - 如何热重载包装在 native 导入上下文中的模块?

我在文件@/lang/index.js中有以下功能:asyncfunctionfetchMessages(locale){constmodule=awaitimport(/*webpackChunkName:"lang/[request]",webpackExclude:/index/*/`@/lang/${locale}`)returnmodule.default}我想热重载此函数导入的模块。我尝试了几种不同的module.hot.accept()变体,但没有成功。这是我在同一个文件末尾的热重载代码,但它不起作用:if(process.env.NODE_ENV!=="producti

javascript - React-Native/Redux dispatch 在 Action 中多次触发

我正在制作一个React/Redux应用程序。在我的一个操作中,dispatch在没有明显原因的情况下被调用时会触发6-8次。请参阅下面我的组件的操作文件中的addMarkersRequestAddress:exportfunctionaddMarkersSuccess(response){return{type:'addMarkersSuccess',status:'success',response:response,receivedAt:Date.now(),};}exportfunctionaddMarkersFailure(error){return{type:'addMar

javascript - Animated.Component/createAnimatedComponent(Component) 与 Component 有何不同?

我们正试图从styled-components项目中找出以下问题的原因:https://github.com/styled-components/styled-components/issues/389对refs+setNativeProps进行了一些更改,在一个地方破坏了动画,假设是因为一些动画相关信息没有被正确传递。因此问题是了解createAnimatedComponent如何改变初始组件,添加了什么?如果传递不正确,什么会导致动画中断?如果您知道可能导致此问题的原因,请提供想法/详细答案。更新与问题相关的重大更改发生在thisfile中的某处引用innerRef向下传递ref,

javascript - 文本内容不匹配。 React 16 中的警告

我尝试使用服务器端渲染构建ReactJs应用程序我的客户端和服务器入口点:client.jsxconststore=createStore(window.__INITIAL_STATE__);hydrate({renderRoutes(routes)},document.querySelector('#root'));server.jsxconstapp=express();if(isDev){constwebpack=require('webpack');constwebpackDevMiddleware=require('webpack-dev-middleware');const

javascript - 如何翻译 react-router 路由路径

我的应用程序有多个语言环境(it、en)。我需要翻译所有的路线。例如,我的条款和条件页面必须具有路径(每个语言环境一个):it/terminien/terms我需要做的事情如下://routes.jsconstroutes=()如您所见,这个时髦的解决方案对于应用程序的可扩展性来说并不是很好。 最佳答案 我目前处理路由本地化的方法是像处理任何本地化内容一样处理它们。在你的情况下我会这样做://routes.jsfunctioncreateRoutes(language){/*You'llprobablyhavemoreworktod

javascript - react-navigation 如何设置动画值对应的tabBar边距

我正在使用react-navigationTabNavigation。我的选项卡导航上方有一个标题,它可以折叠和展开对应于scrollView。这是我的问题:当我一直向上滚动时,标题会折叠,这就是我想要的,但tabBar将保持静止(请看照片)。有没有办法可以设置与ScrollView对应的tabBar边距?这样当header折叠时就没有marginTop了。constHeader_Maximum_Height=40;constHeader_Minimum_Height=0;exportdefaultclassAppextendsComponent{render(){return()}}

javascript - React Flux 实现调度链

我正在尝试将React与Flux架构一起使用,但偶然发现了一个我无法处理的限制。问题如下:有一个监听事件的商店。事件具有对象ID。如果需要,我们需要获取对象并将其选中。如果商店没有具有此ID的对象-将对其进行查询。在回调中,我们将另一个事件发送到负责选择的存储。如果商店有对象-我想分派(dispatch)选择事件,但我不能,因为分派(dispatch)正在进行中。目前我想到的最佳解决方案是将内部调度包装在setTimeout(f,0)中,但它看起来很可怕。实际上这个问题很普遍——如果每个新的调度都是基于以前的调度处理结果,我应该如何在没有调度嵌套的情况下组织调度链(不违反当前的Flux

javascript - TouchableHighlight 在键盘打开时不接受按下事件

我有一个组件,它并排包含一个TextInput和一个TouchableHighlight。你点击文本框,输入你想要的内容,然后点击添加按钮保存它。现在的问题是打字时键盘打开,你需要关闭它,否则按钮不会响应。如果我先点击按钮,键盘消失,然后再点击一次。我觉得我应该能够将两者合二为一。这是我的渲染组件:classFormInputextendsComponent{constructor(props){super(props);this.state={text:null};}componentDidMount(){this.refs.textInput.focus();}_changeTex