Question

我有一个使用expo的React本机代码，带有带有文本的图形。在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>

以下是Apple与Android的图像比较：

为什么会发生这种情况，如何使它只显示一次？

Answer 1

因为已经在ProgressCircle组件中声明了进度，并将其呈现在其中。只需从ProgressCircle中删除Text组件即可。我猜它在Android上已经隐藏了溢出，因此没有显示在那里。

Answer 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>

Answer 3

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

我的规格：

Private Sub Worksheet_Change(ByVal Target As Range)

if Target.Address = Range("Product").Address then
   Activesheet.Unprotect
   Range("Everything Except Country").Locked = False
   Range("Country").Locked = True
   Activesheet.Protect
end if

End Sub

代码：

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

结果

但这两个代码在Android上都能正常工作。

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

3 个答案: