Question

我想在tabicon旁边添加一些图标（小圆圈）。我怎样才能做到这一点？也许有些png高于另一个。所以我可以给出一个视觉反馈，哪个连接是活跃的

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

通常，使用activeTintColor tabBarOption，以便可以使用不同颜色呈现图标以指示它处于活动状态。而不是tabBarIcon只返回一个图像，它返回一些可以用颜色设置样式的Icon组件（This是一个可以获得这样好图标的例子。）

但如果你想坚持使用图片：

tabBarIcon属性为defined：

“[a] React Element或给出{focused：boolean，tintColor：string}的函数返回一个React.Node，显示在标签栏中。”

因此，如果您提供focused作为参数，您可以选择将tabBarIcon显示为不同的图像，如下所示：

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}
                    />
                )
            }
        },

或者，如果您想在图像上显示另一个组件（如“小圆圈”）：

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}
    />
    )
  }
},

tabbar中的两个图标| reactnavigation

1 个答案: