反应导航自定义tabBarComponent？

Question

这样的navigationOptions代码。

static navigationOptions = ({navigation})=>({ 
     tabBarLabel:'查看', 
     headerTitle:navigation.state.params.title, 
     tabBarIcon: ({ tintColor,focused }) => (
      <Image style={SKIN.tabImage} source={focused?AppImages.MyPost.lookchoose:AppImages.MyPost.look}/> 
     ), 
    }); 

这是我的Tab组件，我如何获得tabBarLabel和tabBarIcon？

export default class Tab extends Component { 
    renderItem = (route, index) => { 
     const { 
      navigation, 
      jumpToIndex, 
     } = this.props; 

     const focused = index === navigation.state.index; 
     const color = focused ? this.props.activeTintColor : this.props.inactiveTintColor; 
     return (
      <TouchableOpacity 
       key={index} 
       style={styles.tabItem} 
       onPress={() => jumpToIndex(index)} 
      > 
       <View 
        style={styles.tabItem}> 
        {this.props.renderIcon(color,focused)} 
        <Text style={{ color }}>{this.props.getLabel()}</Text> 
       </View> 
      </TouchableOpacity> 
     ); 
    }; 

    render(){ 
     console.log('Tab this.props',this.props); 
     const {navigation,} = this.props; 

     const {routes,} = navigation.state; 
     return (
      <View style={styles.tab}> 
       {routes && routes.map(this.renderItem)} 
      </View> 
     ); 
    } 
} 

我自定义选项卡，现在我想使用，但一些错误告诉我。 这样， imagebug 请帮我...

Answer 1

尝试使用此代码更新渲染方法：

render(){ 
      console.log('Tab this.props',this.props); 
      const {navigation,} = this.props; 

      const {routes,} = navigation.state; 
      return (
       <View style={styles.tab}> 
        //pass down the route and the index to the renderItem function 
        {routes && routes.map((route,index) => this.renderItem(route, index))} 
       </View> 
      ); 

Answer 2

renderItem = (route, index) => { 
     const { 
      navigation, 
      jumpToIndex, 
     } = this.props; 

     const focused = index === navigation.state.index; 
     const color = focused ? this.props.activeTintColor : this.props.inactiveTintColor; 
     let TabScene = { 
      focused:focused, 
      route:route, 
      tintColor:color 
     }; 
     return (
      <TouchableOpacity 
       key={route.key} 
       style={styles.tabItem} 
       onPress={() => jumpToIndex(index)} 
      > 
       <View 
        style={styles.tabItem}> 
        {this.props.renderIcon(TabScene)} 
        <Text style={{ color }}>{this.props.getLabel(TabScene)}</Text> 
       </View> 
      </TouchableOpacity> 
     ); 
    };