réagit navigation personnalisé tabBarComponent?

Question

le code de navigationOptions comme ça.

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

c'est mon composant Tab, comment je peux obtenir tabBarLabel et 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> 
     ); 
    } 
} 

Je personnalise l'onglet, maintenant je veux l'utiliser mais un bug me le montre. comme ça, imagebug s'il vous plaît aidez-moi ...

Answer 1

essayer de mettre à jour la méthode render avec ce code:

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> 
     ); 
    }; 

Code