Question

如何呈现<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

Answer 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，如果更改，则应该重新呈现树。

如何将组件用作模板，以便在该组件下呈现所有其他组件

1 个答案: