我必须在3个月内构建一个相对较大的跨平台(iOS和Android)应用程序.
到目前为止,谈到React Native我只有经验NavigatorIOS.虽然我从未真正遇到任何问题,但我从未见过人们推荐使用它.
其他选项Navigator,看起来很简单但可能不允许很多本机UI支持?而NavigatorExperimental我什么都不知道,和单凭这个名字让我担心.我不想做任何最后一分钟的噩梦.
我计划花一个月的时间彻底学习React Native,然后花2个月的时间来构建应用程序.
这使我对我的问题:如果你有打造本土做出反应,你可以使用每个平台,导航,为什么一个跨平台的应用程序?
任何答案或提示非常感谢.
我们在一个非常大的单体上使用create-react-app(with react-app-rewired)。我们对构建时间做了一些改进(将其缩短到大约 20 秒),但是在构建完成后(按照 a yarn start),应用程序需要 2 分钟才能真正加载到浏览器上。
在app.jsx我尝试删除所有根代码并仅呈现典型的“Hello World”p标签时,它几乎不需要那么长时间。我还使用serve在构建文件夹前面运行了一个基本的 Web 服务器,这表明它可能webpack-dev-server存在应用程序大小问题(或者可以说它是在实际构建之前构建的?)。
在 chrome 开发工具网络选项卡中,阻止页面加载的资产是static/js文件夹中的文件。
这是结果的要点webpack-bundle-analyzer
有没有人知道这个问题的起源以及如何改善构建后加载时间?
reactjs webpack create-react-app micro-frontend react-app-rewired
我正在创建一个应用程序,当用户按下ctrl + enter时,我想启动一个函数(在本例中为showMessage).我怎么做,最好没有jQuery.
import React from "react"
const App = React.createClass({
showMessage () {
console.log('hit');
},
render () {
return (
<div>
<button onClick={this.showMessage}>Hit</button>
</div>
);
}
});
module.exports = App;
Run Code Online (Sandbox Code Playgroud) 我有一个钩子,称为useQueryEvents1) 为用户获取所有过去的交易,2) 侦听网络的传入/传出交易。在这两种情况下,事务都被传递到一个函数中addActionToActivity,该函数只是将其附加到活动数组并在 key 下的上下文状态中更新它activity。
我无法让活动正确同步。每当状态更新时,它都没有最后一笔交易,因为它总是落后一步。如果我添加activity依赖项,它会起作用,但随后会启动一个新的侦听器(由于使用新activity值再次调用整个函数),这会导致无限循环,该循环不断切换状态。
function useQueryEvents() {
const { state: { connectedNetwork, selectedWallet, activity },
} = useContext(LocalContext);
useEffect(() => {
async function bootstrapQueryEvents() {
// First get all the past transactions
const transactions = await getAllPastTransactions();
const contract = await getContract();
// Now save them to context state via addActionToActivity
await addActionToActivity(transactions, activity);
// Now that all the past transactions have been saved
// listen to all …Run Code Online (Sandbox Code Playgroud) 我们正在使用Facebook Graph API开发一个应用程序,以跟踪页面随时间推移的指标,例如,页面上帖子的份额.
我们正在从页面Feed中的帖子对象中检索共享,评论和喜欢的数量,然后将它们汇总到我们的报告期间 - 查询格式如下:
{page-id}/posts?fields=shares,created_time,likes.limit(1).summary(true),comments.limit(1).summary(true)&since={start-date}&until={end-date}
Run Code Online (Sandbox Code Playgroud)
但是,我们从此查询中获得的数字与Business Manager Insights页面中的数字不匹配.例如,对于2016年10月份,帖子评论的图谱API计数是洞察数据报告的两倍多.此外,这些数字并不总是与我们从页面上的帖子直接手动计算评论等所获得的数字相匹配.
有没有人解释这些差异可能会如何产生?
我有一个连接到redux的容器,由于connect(mapStateToProps, mapDispatchToProps)线路,它继承了'全局状态'作为道具......
然后容器(Container.js)将道具传递给Table (Table.js),它按预期接收它们.
当我尝试使表成为导航堆栈时,我的问题出现了.原因是我希望能够点击每一行,这些行将导航到DetailPage,这将由依赖于行的不同道具填充.
然而,当添加StackNavigator从Container传递下来的所有道具都消失了,只有React Navigation那些(navigation: {actions:{goBack... ETC}}).
注意:如果我connect直接使用Component,也会发生这种情况.
下面是我的代码结构的dummied down示例.
我做错了什么/我如何保持传下来的道具?
Container.js
class Container extends Component {
render() {
return (
<View>
<Table {...this.props} />
</View>
)
}
}
const mapStateToProps = state => {
return {
data: state.data,
propTwo: state.propTwo
}
}
const mapDispatchToProps = dispatch => {
return {
functionOne: () => dispatch(functionOne()),
functionTwo: arg => dispatch(functionTwo(arg))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Market);
Run Code Online (Sandbox Code Playgroud)
Table.js
const …Run Code Online (Sandbox Code Playgroud) 要添加一个额外的抽屉按钮,该按钮不链接到按钮上方或下方的路径,DrawerItemList就像执行以下操作一样简单:
<Drawer.Navigator initialRouteName="Home" drawerContent={props => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Logout" onPress={() => props.navigation.navigate("Login")} />
</DrawerContentScrollView>
)
}}>
<Drawer.Screen name="Home" component={Home}/>
<Drawer.Screen name="About" component={About} />
</Drawer.Navigator>
Run Code Online (Sandbox Code Playgroud)
但现在我需要在和按钮之间添加一个自定义按钮(如“注销”按钮,其自定义按钮onPress不仅会转到某个路线,还会导航到“主页”并调用几个功能)。HomeAbout
所以我关于抽屉上按钮的最终按钮结果应该是:
- 家
- 风俗
- 关于
- 登出
我需要以某种方式分手DrawerItemList,但不知道如何分手。
我有什么想法可以实现这一目标吗?
小吃都可以在这里找到
(使用反应导航> v5)
是否可以在三元运算符if/else中进行多个运算?
我在下面给出了一个例子,可能不是最好的例子,但我希望你明白我的意思.
var totalCount = 0;
var oddCount = 0;
var evenCount = 0;
for(var i = 0; i < arr.length; i++) {
if(arr[i] % 2 === 0) {
evenCount ++;
totalCount ++;
} else {
oddCount ++;
totalCount ++;
}
}
Run Code Online (Sandbox Code Playgroud)
变成这样的东西:
var totalCount = 0;
var oddCount = 0;
var evenCount = 0;
for(var i = 0; i < arr.length; i++) {
arr[i] % 2 === 0? evenCount ++ totalCount ++ : oddCount ++ totalCount ++;
}
}
Run Code Online (Sandbox Code Playgroud) 我正在尝试一行导出const我的<SearchForm/>但由于某种原因它出错了.
这是我的代码
import React from 'react';
export const SearchForm = props => (
<form className="search-form" onSubmit={props.onSubmit}>
<input placeholder="Username" type="text" value={props.value} onChange={props.onChange}></input>
<input type="submit" value="Search"></input>
</form>)
SearchForm.propTypes = {
onSubmit: React.PropTypes.func.isRequired,
value: React.PropTypes.string.isRequired,
onChange: React.PropTypes.func.isRequired
}
Run Code Online (Sandbox Code Playgroud)
React.createElement:type无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件.检查渲染方法
Home.
如果我这样做const SearchForm = props => .....并且export default <SearchForm/>在底部,这很好.我也试过export default SearchForm...和其他变化.
我正在关注egghead.io教程和使用完全相同语法的人,所以我不知道什么是错的?这是他的代码
reactjs ×6
javascript ×4
react-native ×4
android ×1
facebook ×1
for-loop ×1
go ×1
if-statement ×1
ios ×1
listener ×1
webpack ×1
windows ×1