使用 react-native-router 渲染子组件答案

【问题标题】：Render child components with react-native-router使用 react-native-router 渲染子组件
【发布时间】：2017-03-14 13:38:45
【问题描述】：

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

因此，我在 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 标签内渲染任何 child 组件（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 为空。

有什么想法吗？谢谢。

【问题讨论】：

标签： react-native

【解决方案1】：

我建议你尝试以下方法：

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

【讨论】：

【解决方案2】：

我一直在为同样的问题而苦苦挣扎。

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

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

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

RNRF 文档没有直接说明 DefaultRenderer 是如何工作的，我只是在发现它写在示例中的某个地方后尝试了一下（再也找不到它了）。

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

【讨论】：