zwei Symbole in der Tableiste | reactnavigation

Question

Ich möchte ein Symbol (kleiner Kreis) neben dem Tabicon hinzufügen. Wie kann ich das machen? Vielleicht etwas png über einem anderen. So kann ich ein visuelles Feedback geben, die Verbindung aktiv ist

export default class ConnectionInfoScreen extends Component<{}> { 
    static navigationOptions ={ 
     tabBarIcon: 
      ({tintColor}: { tintColor: any }) => (
       <Image 
        source={require('../../assets/connect.png')} 
        style={[styles.icon, {tintColor: tintColor}]} 
       /> 
      ), 
    }; 

    render() { 
     var isConnected = true; 
     if (isConnected) { 

      return (
       <View> 
        <Text>keine Verbindung</Text> 
       </View> 
      ); 
     } 

     else { 
      return (
       <View> 
        <Text>ConnectionInfo</Text> 
       </View> 
      ); 
     } 
    } 
} 

Answer 1

Üblicherweise wird die activeTintColortabBarOption verwendet wird, so dass das Symbol in einer anderen Farbe dargestellt werden, um anzuzeigen, dass er aktiv ist. Anstatt TabBarIcon nur ein Bild zurückgeben, gibt es eine Art Icon-Komponente, die mit Farbe gestylt werden kann (This ist ein Beispiel dafür, wo Sie gute Symbole wie dieses erhalten können).

---

Aber wenn Sie mit Bildern bleiben:

Die tabBarIcon Eigenschaft ist defined als:

„[a] Reagieren Element oder eine Funktion, die gegeben {konzentriert: boolean , tintColor: string} gibt einen React.Node zurück, der in der Tab-Leiste angezeigt wird. "

tabBarIcon: 
     ({ focused,tintColor }) => { 
      if(focused){ 
       return (
        <Image 
         source={require('./focused-icon.png')} 
         style={styles.icon} 
        /> 
       ) 
      } 
      else{ 
       return(
        <Image 
         source={require('./not-focused-icon.png')} 
         style={styles.icon} 
        /> 
       ) 
      } 
     }, 

Oder, wenn Sie eine andere Komponente angezeigt werden sollen (wie ein ‚small:

Also, wenn Sie focused als Parameter angeben, können Sie optional ein anderes Bild als tabBarIcon so anzuzeigen Kreis ') über Ihr Bild:

tabBarIcon: ({ focused,tintColor }) => { 
    if(focused){ 
    return (
     <View> 
     <Image 
      source={require('./my-icon.png')} 
      style={styles.icon} 
      /> 
      <View name="active-indicator" style={{backgroundColor:'red',width:10,height:10,borderRadius:20,position:'absolute',top:-5,left:-5}}/> 
     </View> 
    ) 
    } 
    else{ 
    return(
    <Image 
     source={require('./my-icon.png')} 
     style={styles.icon} 
    /> 
    ) 
    } 
},