反応ナビゲーションcustom tabBarComponent？

Question

navigationOptionsのようなコードです。

これは私の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 ...このコードでrenderメソッドを更新

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