我有relay
与...一起工作react-native
,但我对如何最好地利用中继路由和根容器感到困惑,特别是在使用Navigator
呈现多条路线。
参加以下课程:
var Nav = React.createClass({
renderScene(route, nav) {
switch(route.id) {
case 'first':
return <First navigator={nav} />
case 'second':
return <Second navigator={nav} />
}
},
render() {
<Navigator
initialRoute={{ id: 'first' }}
renderScene={this.renderScene}
/>
}
})
module.exports = Relay.createContainer(Nav, {
fragments: {
viewer: () => Relay.QL`
fragment on User {
${First.getFragment('viewer'},
${Second.getFragment('viewer'}
}
`
}
})
在我的父路由中,我请求User
构建查询的片段。
问题是该片段将包含由两个定义的字段first
and second
组件,即使一次只显示其中一个组件。
在这种情况下我应该:
1)返回另一个Relay.RootContainer
in the renderScene
打回来?嵌入通常是一个坏主意Relay.RootContainers
彼此之内?
renderScene(route, nav) {
switch(route.id) {
case 'first':
return (
<Relay.RootContainer
Component={First}
route={new FirstRoute()}
renderFetched={(data) => {
return <First navigator={nav} {...data} />
}}
/>
)
}
}
2)使用条件变量来包含片段?
initialVariables: {
first: true
},
fragments: {
viewer: (variables) => Relay.QL`
fragment on User {
${First.getFragment('viewer').if(variables.first)
}
`
}
或者还有其他建议吗?
Using something like this:1
function matchRoute(route, map) {
return map[route.name] ? map[route.name]() : null;
}
尝试这个:
fragments: {
viewer: (variables) => Relay.QL`
fragment on User {
${route => matchRoute(route, {
FirstRoute: () => First.getFragment('viewer'),
SecondRoute: () => Second.getFragment('viewer'),
}},
}
`,
}
[1]: medium.com/@cpojer/relay-and-routing
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)