android - 将图像而不是字符串标题添加到 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}
              />

这将显示带有标题字符串“第一、第二和第三”的段。现在，我想用图像替换它们，而不是这些字符串。那可能吗？我该怎么做？

Answer 1

我通过查看 @react-native-community/segmented-control 的源代码找到了一种方法(仅适用于 Android...)库(版本'^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}
    />

结果:

附言
此解决方案仅适用于 Android……我还没有找到让它在 iOS 上运行的方法。