1
votes

React Native affichant le texte deux fois dans Apple, une fois dans Android

J'ai un code natif de réaction, utilisant expo, avec un graphique avec du texte. Dans Apple, cette application l'affiche deux fois. Dans Android, une fois.

Voici le code:

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>

Voici une comparaison d'image entre Apple et Android:

Pourquoi cela se produit-il, et comment puis-je ne l'afficher qu'une seule fois?

p >

android ios react-native expo

0 commentaires

3 Réponses :

1
votes

Parce que progress est déjà déclaré dans le composant ProgressCircle, et qu'il est rendu à l'intérieur. Supprimez simplement le composant Text du ProgressCircle. Je suppose que le débordement est caché sur Android, donc il n'est pas affiché ici.

1 commentaires

J'ai fini par le retirer de l'intérieur du cercle et le mettre en dessous. Je décale le texte avec un marginTop -100 jusqu'à ce qu'il repose au-dessus du cercle.

0
votes

si tout le reste échoue, essayez d'ajouter une condition de rendu pour la plate-forme 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>

0 commentaires

0
votes

J'ai rencontré un problème similaire en essayant d'afficher YAxis sous la forme sur iOS14 . J'ai utilisé parce que j'avais du mal à utiliser YAxis pour mettre le libellé en haut de la barre du graphique.

Mes spécifications:

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

Code:

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

Résultat

Ce que je devais faire était d'encapsuler le dans une et le problème a été résolu:

Code modifié: p >

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

Résultat

Les deux codes fonctionnaient bien sur Android, cependant.

0 commentaires