我有 relay
与 react-native
合作,但我对如何最好地利用中继路由和根容器感到困惑,尤其是在使用 Navigator
时。呈现多条路线。
参加以下类(class):
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
定义的那些字段。和 second
组件,即使一次只显示其中一个。在这种情况下,我应该:
1) 返回另一个
Relay.RootContainer
在 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)
}
`
}
或者有其他建议吗?
最佳答案
使用这样的东西: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
关于react-native - 将 Relay 与 React-Native 结合使用时的条件片段或嵌入的根容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32577496/