将图像而不是字符串标题添加到react-native-segmented-control-tab

Question

我在项目中使用react-native-segmented-control-tab，它工作正常。下面是我当前的代码

<SegmentedControlTab
                tabsContainerStyle={styles.tabsContainerStyle}
                tabStyle={styles.tabStyle}
                activeTabStyle={styles.activeTabStyle}
                values={["First", "Second", "Third"]}
                selectedIndex={this.state.selectedIndex}
                onTabPress={this.handleIndexChange}
              />

这将显示带有标题字符串“ First，Second和Third”的句段。现在，我想用图像代替它们，而不是这些字符串。那可能吗？我该怎么办？

Answer 1

我通过查看@react-native-community/segmented-control库的源代码（版本'^ 2.2.1'）-文件'SegmentedControlTab.js'第84行找到了一种方法。

<TouchableOpacity
  style={styles.container}
  disabled={!enabled}
  onPress={onSelect}>
  <View style={[styles.default]}>
    {typeof value === 'number' || typeof value === 'object' ? (
      <Image source={value} style={styles.segmentImage} />
    ) : isBase64(value) ? (
      <Image source={{uri: value}} style={styles.segmentImage} />
    ) : (
      <Text style={[idleStyle, selected && activeStyle]}>{value}</Text>
    )}
  </View>
</TouchableOpacity>

这是呈现传入的每个文本值的代码。如您所见，如果传入number或object（例如{uri: 'https://icons.iconarchive.com/icons/papirus-team/papirus-apps/256/albion-online-icon.png'}）库将呈现一个<Image />元素。您还可以发送Base64编码的图像，它将呈现<Image />。

如果传入的内容既不是数字，对象也不是Base64字符串，则库将呈现<Text>元素。

以下示例：

    <SegmentedControl
      values={['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAA7klEQVQ4T92Uvw6CQAzGvzPRxNXkNOCiz8Do5Is7uvEIhkkwnnF00AFTkpJayh8TJlg40q8fv7Z35zDy40b2w8QM95EvZYuyIjQqNEvmRCuBDLvinYZ9A/uH8AVg2WZIRkQ5c+5wye9nqasJkwTzZ+7fHCyBqwO2kkKWuov9yZU4kn4Vh0Wa4kPrylA3W5GFrAhr1jGdRU+xCp2CTELfnKTfrNMaCVUZSjOZpCkknV6zqWnYVo61ZTRQo2Q2k0L9AyvGrfsZilW6RWv1nVtVbxs16UdWBN+1sfeRvwHYsIZhJnbb9J3t+qQMEQ7VfAGjuKJN2bFKJQAAAABJRU5ErkJggg==', {uri: 'https://icons.iconarchive.com/icons/papirus-team/papirus-apps/256/albion-online-icon.png'}]}
      style={segmentControlStyles.container}
      selectedIndex={accessByIndex}
      onChange={onAccessByChange}
      backgroundColor={mainColors.segmentBackground}
      fontStyle={segmentControlStyles.text}
    />

结果：