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

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

标签： androidiosreact-nativenpmuisegmentedcontrol

Answer 1

通过查看@react-native-community/segmented-control库（版本'^2.2.1'）的源代码-文件'SegmentedControlTab.js，我找到了一种方法（仅适用于Android...）' 第 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>

这是呈现传入的每个文本值的代码。如您所见，如果传入 anumber或 an 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}
    />

结果：

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