如何将组件用作模板，所有其他组件都在该组件下呈现答案

【问题标题】：How to use components as a template that all other components get rendered under that component如何将组件用作模板，所有其他组件都在该组件下呈现
【发布时间】：2018-05-08 08:44:16
【问题描述】：

如何渲染<Container/> 和<StyleProvider/> 组件下的每个组件？我想使用 2 个组件作为模板。我正在使用react-native-router-flux 进行路由。

Actions.myAction()调用时，调用了需要的组件，但在<StyleProvider/>下没有渲染

render(){
return (
    <Root>
        <StyleProvider style={getTheme(commonColor)}>  
            <Container>
                 <StatusBar backgroundColor="#386890" barStyle="light-content"/>
                 <Routes /> 
            </Container>
        </StyleProvider>
    </Root>)}

这是我的路线

import React from 'react'
import { Router, Scene } from 'react-native-router-flux'
import Home from '../Home'
import Scan from '../Scan'
import Login from '../Login'
import ViewHistory from '../ViewHistory'
import History from '../History'
import Welcome from '../welcomeLoader/Welcome'
import Main from '../../../Main'


const Routes = () => (
   <Router>
     <Scene clone key = "root">
     <Scene key = "welcome" component = {Welcome} hideNavBar={true} initial = {true} />
     <Scene key = "history" component = {History}  hideNavBar={true} />
     <Scene key = "login" component = {Login} hideNavBar={true} />
     <Scene key = "scan" component = {Scan}  hideNavBar={true} />
     <Scene key = "viewHistory" component = {ViewHistory} hideNavBar={true} />
  </Scene></Router>)
export default Routes

【问题讨论】：

标签： reactjs react-native react-native-router-flux

【解决方案1】：

一种蛮力的重新渲染方式是更改组件上的key。

因此在这种情况下：

render(){
   return (
      <Root>
         <StyleProvider style={getTheme(commonColor)} key={commonColor}>  
            <Container>
                <StatusBar backgroundColor="#386890" barStyle="light-content"/>
                <Routes /> 
            </Container>
         </StyleProvider>
     </Root>
)}

也许将key={commonColor} 添加为您的组件key，如果更改，它应该重新渲染树。

【讨论】：