reagieren Navigation benutzerdefinierte tabBarComponent?

Question

der navigationOptions-Code so.

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

das ist meine tab componet, wie kann ich tabBarLabel und tabBarIcon?

Ich benutzerdefinierte Registerkarte, jetzt möchte ich verwenden, aber einige Fehler zeigen Sie mir. wie das, imagebug mir bitte helfen ...

Answer 1

versuchen, das Verfahren mit diesem Code machen Aktualisierung:

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