React Native 在 Apple 中显示文本两次，在 Android 中显示一次答案

【问题标题】：React Native showing text twice in Apple, Once in AndroidReact Native 在 Apple 中显示文本两次，在 Android 中显示一次
【发布时间】：2019-07-26 14:30:22
【问题描述】：

我有一个反应原生代码，使用 expo，带有一个带有文本的图表。在 Apple 中，此应用程序显示了两次。在 Android 中，一次。

代码如下：

import { ScrollView, StyleSheet, Text, View, Alert, Dimensions } from 'react-native';

...

// Charts
import * as scale from 'd3-scale'
import { ProgressCircle, LineChart, XAxis, Grid } from 'react-native-svg-charts';


.... <Other Code> ... 

        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <View style={{ padding: 10 }}>
<ProgressCircle
    style={{ height: 150, width: 150 }}
    startAngle={-Math.PI * 0.5}
    endAngle={Math.PI * 0.5}
    progress={this.state.perFirstTier}
    progressColor={constants.BGC_GREEN}
    strokeWidth={10}>
    {* THIS IS WHAT IS DOUBLED*}
    <Text key ='percentage' style={{
        position: "absolute",
        marginLeft: 65, marginTop: 50
    }}>{(this.state.perFirstTier * 100).toFixed(0)}%</Text>

</ProgressCircle>
<View style={{ marginTop: -40, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text style={styles.description}>{i18n.t('activityDashboard.firstGoalDesc')}</Text>
    {/* Show colored badge if 100%*/}
    {this.state.perSecondTier == 1
        ? <Image style={styles.medalImage} source={require('../../utils/images/silver_medal.png')}></Image>
        : <Image style={styles.medalImage} source={require('../../utils/images/grey_medal.png')}></Image>
    }
</View>

        </View>

这是苹果与安卓的图片对比：

为什么会发生这种情况，我怎样才能让它只显示一次？

【问题讨论】：

标签： android ios react-native expo

【解决方案1】：

因为 ProgressCircle 组件中已经声明了进度，并且在其中渲染了进度。只需从 ProgressCircle 中删除 Text 组件。我猜它在 Android 上已经隐藏了溢出，所以它没有显示在那里。

【讨论】：

我最终将它从圆圈内移除，并放在下方。我用 -100 marginTop 偏移文本，直到它位于圆圈的顶部。

【解决方案2】：

如果一切都失败了，请尝试为 iOS 平台添加渲染条件。

<ProgressCircle
  style={{ height: 150, width: 150 }}
  startAngle={-Math.PI * 0.5}
  endAngle={Math.PI * 0.5}
  progress={this.state.perFirstTier}
  progressColor={constants.BGC_GREEN}
  strokeWidth={10}
>
  {/* THIS IS WHAT IS DOUBLED */}
  {Platform.OS === 'ios' 
    ? <View />
    : (
        <View>
          <Text
            key ='percentage'
            style={{
              position: "absolute",
              marginLeft: 65,
              marginTop: 50
            }}
          >
            {(this.state.perFirstTier * 100).toFixed(0)}%
          </Text>
        </View>
    )
  }
</ProgressCircle>

【讨论】：

【解决方案3】：

我在 iOS14 上尝试将 YAxis 呈现为时遇到了类似的问题。我使用是因为很难使用 YAxis 将标签放在图表栏的顶部。

我的规格：

{
    "expo": "~39.0.2",
    "react-native-svg-charts": "^5.4.0",
    "react-native-svg": "12.1.0"
}

代码：

const Values = ({ x, y, data }) => {
return (
    data.map((value, index) => {
        return (
            <Text
                key={index}
                style={{
                    color: '#6e6969',
                    fontSize: 10,
                    position: 'absolute',
                    left: x(index) + 1,
                    top: y(value) - 15
                }}
            >
                {value}
            </Text>
        )
    })
)}

<BarChart
    style={styles.chart}
    data={data.plot}
    spacing={0.2}
    svg={{ fill: 'rgba(134, 65, 244, 0.8)' }}
    contentInset={{ top: 20, bottom: 20, left: 0, right: 0 }}
>
    <Values />
</BarChart>

<XAxis
    style={{ marginHorizontal: -10 }}
    data={data.plot}
    formatLabel={(value, index) => data.labels[index]}
    contentInset={{ left: 30, right: 30 }}
    svg={{ fontSize: 10, fill: colors.medium }}
/>

结果

我需要做的是将包装到中，问题就解决了：

更改代码：

const Values = ({ x, y, data }) => {
return (
    data.map((value, index) => {
        return (
            <View key={index}>
                <Text
                    style={{
                        color: '#6e6969',
                        fontSize: 10,
                        position: 'absolute',
                        left: x(index) + 1,
                        top: y(value) - 15
                    }}
                >
                {value}
            </Text>
        </View>
        )
    })
)}

结果

不过，这两个代码在 Android 上都运行良好。

【讨论】：