使用react-native-router

Question

我正在使用react-native-router-flux部署React Native应用程序。

因此，我已在 root 应用程序文件中定义了嵌套路由，如下所示：

export default class Dashboard extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="app" component={App} title='App'>
            <Scene key="application_dashboard" component={ApplicationLauncher} title="Dashboard"/>
            <Scene key="example_interactions" component={ExampleInteractions} title="ExampleInteractions" initial={true} />
          </Scene>
        </Scene>
      </Router>
      )
  }
}

ExampleInteractions组件，应该是最初加载的，只是呈现一个长文本：

export default class ExampleInteractions extends Component {
  render() {
    return (
      <View>
        <Text>.....long text.....</Text>
      </View>
      );
  }
}

目标

在App组件的Content标记内渲染任何子组件（ApplicationLauncher，ExampleInteractions）。

export default class App extends Component {
  render() {
    return (
      <AppContainer>
        <ColleagueHeader/>  
        <ScrollableContainer>
          <BaseHeader/>
          <CustomerHeader/>      
          <Content>
            ****** I would like to render the child component here *****
          </Content>
          <Footer/>
        </ScrollableContainer>
      </AppContainer>

      );
  }
}

尝试了方法：

1）{this.props.children}

<Content>
{this.props.children}                
</Content>

但它在以下错误下失败：

  

对象作为React子对象无效（找到：具有键{key，name，sceneKey，parent，type，title，initial，component，index}的对象）。

{this.props.children}对象是：

2）{this.props.children [0] .component}

<Content>
{this.props.children[0].component}
</Content>

然后，基本App组件正确呈现，但子组件ExampleInteractions没有。因此，Content为空。

有什么想法吗？感谢。

Answer 1

我建议您尝试以下方法：

<Content>
  {React.createElement(this.props.children[0].component, {key: "you can pass props here"})}
</Content>

Answer 2

我一直在努力解决同样的问题。

我知道要显示单个组件，您可以执行以下操作，它将显示第一个子场景。

import { DefaultRenderer } from 'react-native=router-flux';

<Content>
   <DefaultRenderer 
      navigationState={this.props.children[0]} 
      onNavigate={this.props.onNavigate} 
   />
</Content>

RNRF文档没有直接解决DefaultRenderer的工作原理，我只是在找到它写在某个例子中的某个地方后尝试了它（不能再找到它了）。

我还在研究实际在子场景之间导航的问题。如果我能搞清楚的话，我会更新。