탐색 반응 : 변화가 TabNavigator 스타일 REDUX 저장소를 기반으로

Question

그래서 가게의 상태에 따라가 TabNavigator의 스타일을 시도하고있다 :

import React from 'react'; 
import { connect } from 'react-redux'; 
import { TabNavigator } from 'react-navigation'; 

const Tabs = TabNavigator(
    // Screens 
    { 
    Boards: { 
     screen: Boards, 
     navigationOptions: { 
     tabBarLabel: 'Boards', 
     tabBarIcon:() => <MaterialCommunityIcon name="bulletin-board" size={25} color="white" />, 
     }, 
    }, 
    Bookmarks: { 
     screen: Bookmarks, 
     navigationOptions: { 
     tabBarLabel: 'Bookmarks', 
     tabBarIcon:() => <EntypoIcon name="bookmarks" size={25} color="white" />, 
     }, 
    }, 
    Settings: { 
     screen: Settings, 
     navigationOptions: { 
     tabBarLabel: 'Settings', 
     tabBarIcon:() => <MaterialCommunityIcon name="settings" size={25} color="white" />, 
     }, 
    }, 
    }, 
    // TabNavigator configuration 
    { 
    tabBarPosition: 'bottom', 
    tabBarOptions: { 
     showIcon: true, 
     showLabel: false, 
     renderIndicator:() => null, 
     style: { 
     // TODO: Make tabNavigation color change based on current selected theme. 
     backgroundColor: this.props.theme === 'default' ? 'black' : 'red', 
     }, 
    }, 
    }, 
); 

const mapStateToProps = state => { 
    return { 
    theme: state.configuration.theme, 
    }; 
}; 

export default connect(mapStateToProps)(Tabs); 

을하지만 this.props.theme를 사용하려고하면 내가 얻을 : undefined is not an object (evaluating 'this.props.theme') tabNavigator가 소품이나 그와 비슷한 것을 받아들이지 않기 때문에 tabNavigator를 redux 상점에 연결할 수 없기 때문에 이런 일이 일어난다는 것을 알 수 있습니다. 그래서 어떻게 할 수 있습니까?

편집 한

이 위에서 제시 한 방법으로 사용자 정의 탭 표시 줄을 사용하여 해결하기 위해 노력 후,이 오류가 팝업 :

그리고 코드 :

을 TabBar.js

import React from 'react'; 
import { connect } from 'react-redux'; 
import { TabBarBottom } from 'react-navigation'; 

const TabBar = ({ theme }) => (
    <TabBarBottom style={{ backgroundColor: theme === 'dark' ? 'black' : 'red' }} /> 
); 

const mapStateToProps = state => ({ 
    theme: state.configuration.theme, 
}); 

export default connect(mapStateToProps)(TabBar); 

router.js

import { TabNavigator } from 'react-navigation'; 

import TabBar from './components/TabBar'; 

import Boards from './screens/Boards'; 
import Settings from './screens/Settings'; 
import Bookmarks from './screens/Bookmarks'; 

const Tabs = TabNavigator(
    // Screens 
    { 
    Boards: { 
     screen: Boards, 
     navigationOptions: { 
     tabBarLabel: 'Boards', 
     tabBarIcon:() => <MaterialCommunityIcon name="bulletin-board" size={25} color="white" />, 
     }, 
    }, 
    Bookmarks: { 
     screen: Bookmarks, 
     navigationOptions: { 
     tabBarLabel: 'Bookmarks', 
     tabBarIcon:() => <EntypoIcon name="bookmarks" size={25} color="white" />, 
     }, 
    }, 
    Settings: { 
     screen: Settings, 
     navigationOptions: { 
     tabBarLabel: 'Settings', 
     tabBarIcon:() => <MaterialCommunityIcon name="settings" size={25} color="white" />, 
     }, 
    }, 
    }, 
    // TabNavigator configuration 
    { 
    tabBarPosition: 'bottom', 
    tabBarComponent: TabBar, 
    }, 
); 

export default Tabs; 

Answer 1

당신은, 당신의 자신의 탭 표시 줄을 만들 네비게이터와 REDUX로를 연결 할 수 있습니다.

const MyAwesomeTabBar = ({theme}) => (
    <View> 
    ... 
    </View> 
) 

export default connect(mapStateToProps)(MyAwesomeTabBar); 

다음 네비게이터 정의 : 표현 적/기능적 구성 요소의 분리에 관해서는

const Tabs = TabNavigator(
    // Screens 
    { 
    ... 
    }, 
    // TabNavigator configuration 
    { 
    tabBarPosition: 'bottom', 
    tabBarComponent: MyConnectedAwesomeTabBar 
    }, 
); 

- 내가 그렇게 나쁜 관행 일을하지 않는 것이 많이만큼 일이 아니라고 생각한다 그것은 좋은 습관입니다. 그리고 꽤 쉽게 여기에서 분리 할 수 ​​있습니다. 단지 MyAwesomeTabBar을 기능적 구성 요소로 사용하십시오.이 구성 요소는 여러 프레젠테이션 구성 요소를 사용합니다.