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

Posted 2023-03-15

【中文标题】React Native 在 Apple 中显示文本两次，在 Android 中显示一次

【英文标题】：React Native showing text twice in Apple, Once in 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>

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

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

【参考方案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 上都运行良好。