我正在尝试按照 this GitHub issue 中讨论的提示使用 Relay 和 react-navigation
设置我的应用程序。另请注意,我使用 create-react-native-app
来创建项目。
这就是我的设置:
App.js
Relay.injectNetworkLayer(
new Relay.DefaultNetworkLayer('https://api.graph.cool/relay/v1/ciyeih9590fhl0162e5zh1z4h', {
headers: {
},
})
)
const RootNavigationStack = StackNavigator({
PokemonList: {
screen: PokemonList
}
})
export default class App extends React.Component {
render() {
return <RootNavigationStack />
}
}
PokemonList.js
class IndexRoute extends Route {
static queries = {
viewer: () => Relay.QL`query { viewer }`
}
static routeName = 'IndexRoute'
}
export default class PokemonList extends React.Component {
render() {
return (
<Relay.RootContainer
Component={PokemonListRelayContainer}
route={new IndexRoute()}
renderFetched={(data) => {
console.log('PokemonList - renderFetched', data)
return <Text>Test</Text>
}}
/>
)
}
}
const PokemonListRelayContainer = Relay.createContainer(PokemonList, {
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
id
allPokemons(first: 10) {
edges {
node {
id
name
}
}
}
}
`
}
})
正在执行renderFetched
中的日志记录语句,但由于某种原因data
为空:
PokemonList - renderFetched {"viewer":{"__dataID__":"viewer-fixed","__fragments__":{"0::client":[{}]}}}
知道我在这个设置中缺少什么吗?
最佳答案
我自己解决了这个问题,所以显然 PokemonList
作为我的根组件,无法访问所请求的数据 - 尽管我认为它实际上已加载,但由于 Relay 的原因数据屏蔽对组件不可见。
我想出的解决方案是将 PokemonList
包装在另一个组件中,该组件将渲染 Relay.RootContainer
,然后从那里开始使用我的传统 Relay 设置。
这就是现在的样子:
PokemonListWrapper.js
class PokemonListWrapper extends React.Component {
render() {
return (
<Relay.RootContainer
Component={PokemonList}
route={new IndexRoute()}
renderFetched={data => <PokemonList {...this.props} {...data}/>}
/>
)
}
}
PokemonList.js
class PokemonList extends React.Component {
render() {
return (
<ScrollView>
{this.props.viewer.allPokemons.edges.map(pokemonEdge => (
<Text key={pokemonEdge.node.id}>{pokemonEdge.node.name}</Text>
))}
</ScrollView>
)
}
}
export default Relay.createContainer(PokemonList, {
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
id
allPokemons(first: 10) {
edges {
node {
id
name
}
}
}
}
`
}
})
App.js
Relay.injectNetworkLayer(
new Relay.DefaultNetworkLayer('https://api.graph.cool/relay/v1/ciyeih9590fhl0162e5zh1z4h')
)
export class IndexRoute extends Route {
static queries = {
viewer: () => Relay.QL`query { viewer }`
}
static routeName = 'IndexRoute'
}
const RootNavigationStack = StackNavigator({
PokemonList: {
screen: PokemonListWrapper
}
})
export default class App extends React.Component {
render() {
return (
<RootNavigationStack />
)
}
}
😎
关于javascript - 在 React Native 中使用 React-navigation 时,无法获取 Relay 中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43089129/