動態樣式上反應本地路由器通量的TabBar

我有反應，本地路由器通量場景是充當我的應用程序的TabBar，但是我們需要改變基於整個標籤欄的配色方案在應用程序內部的某些狀態。我們正在使用REDX來進行狀態管理，並且我試圖調整<Scene>組件中的tabBarStyle屬性，但對樣式進行更改沒有任何影響。 TabBar似乎只在組件被掛載時呈現，並且似乎不關心是否有任何傳遞給它的道具被改變。動態樣式上反應本地路由器通量的TabBar

我們正在努力實現不同的主題融入我們的應用程序，這也很好工作，直到我們到了由反應本地路由器通量中使用的部件。

有誰知道的方法，使這些部件的實時更新自己的風格？

來源

2017-06-03 Hobbyist

添加一個答案，我之前想問：你不是試圖重新路由路由器嗎？因爲這不是react-native-router-flux的工作方式。而不是**連接** Navigator類（渲染場景和路線），只需**將TabBarScene直接連接到redux。然後您可以在運行時更新其風格。 – eden

@EnieJakiro你可能有這方面的任何文檔鏈接？我有一個組件可以呈現從Redux接收更新的路由器。但是，當tabBarStyle接收到一個新的值時，它不會被重新渲染。 – Hobbyist

我只有經驗，不幸的是沒有任何文檔向您展示。你有沒有在你的課程中插入'componentWillReceiveProps（newProps）'函數？這樣你可以捕獲更新的樣式。對於這種情況，在更新到來之前，讓你的風格對象保持狀態。然後，當'componentWillReceiveProps'被觸發時，只需將新狀態設置爲** rerender **你的組件。 – eden

您應該使用「風格」，物業的場景爲。這是我如何做一個黑色的TabBar白色圖標與白色字體

  <Scene key='mainScenes' 
       hideNavBar={false} 
       navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}} 
       leftButtonIconStyle = {{ tintColor:'white'}} 
       titleStyle={{color: 'white', fontSize: normalize(14), fontWeight: 'bold'}} 
       tabs={true} 
       translucent={false} 
       style={s.tabbar} 
      > 
       <Scene icon={TabIcon} key='events' hideNavBar={false} title='Events' titleStyle={{color:'white'}} 
        navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}} 
        component={EventsViewScene} sceneStyle={getScreenContainerStyle()} > 

       </Scene> 
       <Scene icon={TabIcon} key='locations' hideNavBar={false} title='Locations' titleStyle={{color:'white'}} 
        navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}} 
        component={LocationsViewScene} sceneStyle={getScreenContainerStyle()} 
       /> 
       <Scene icon={TabIcon} key='search' hideNavBar={false} title='Search' titleStyle={{color:'white'}} 
        navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}} 
        component={SearchViewScene} sceneStyle={getScreenContainerStyle()} 
        initial={false} 
       /> 
       <Scene icon={TabIcon} key='more' hideNavBar={false} title='More' titleStyle={{color:'white'}} 
        navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}} 
        component={InfoViewScene} sceneStyle={getScreenContainerStyle()} 
        initial={false} 
       /> 
      </Scene>

的樣式表：

const s = StyleSheet.create({ 
    tabIcon: { 
     justifyContent: 'center', 
     alignItems: 'center', 
    }, 
    rightButton: { 
     justifyContent: 'center', 
     alignItems: 'center', 
     width: normalize(23), 
     height: normalize(23), 
    }, 
    tabbar: { 
     backgroundColor: 'black', 
     borderTopColor: 'white', 
     borderTopWidth: 2, 
    },

TabIcon：

const icons = { 
    'search': 'search', 
    'events': 'calendar', 
    'locations': 'map-marker', 
    'more': 'info-circle' 
} 

// Application 
class TabIcon extends React.Component { 

    render(){ 
     const {name, title} = this.props; 
     const iconName = icons[name] || 'info-circle' 

     return (
      <View style={s.tabIcon}> 
       <Icon name={iconName} size={TAB_ICON_SIZE} color="white" /> 
       <Text style={{color: this.props.selected ? 'yellow' :'white'}}>{title}</Text> 
      </View> 
     ); 
    } 
}

來源

2017-06-04 09:50:32 itinance

這不幸的是不行的，你應該使用'tabBarStyle'的樣式應用於TabBar，所以也'style'樣式應用於整個場景，使一個巨大的差異，也是量變到質變無論是'style'或'tabBarStyle'不會導致重新渲染。我們想改變TabBar的'backgroundColor'，所以基本上改變容器組件的狀態來改變整個背景的顏色。 – Hobbyist

不知道你在做什麼，因爲沒有代碼發佈。但我的例子可以在這裏看到：https://itunes.apple.com/us/app/nachtplan/id1241634791/https://play.google.com/store/apps/details?id=com.nachtplan – itinance

動態樣式上反應本地路由器通量的TabBar

回答

相關問題