0
react-native-circular-progress というモジュールを使用していますが、サークル内にビュー（統計情報で構成）を正しく配置できませんでした。React NativeでAnimatedCircularProgressのビューを正しく配置する方法
著者によると： あなたはまた、それが現在の進行状況を受けて、例えば、円の内側にそれを表示します、関数を定義することができます
<AnimatedCircularProgress
size={200}
width={3}
fill={this.state.fill}
tintColor="#00e0ff"
backgroundColor="#3d5875">
{
(fill) => (
<Text style={styles.points}>
{ this.state.fill }
</Text>
)
}
</AnimatedCircularProgress>
これはどのように著者の抜粋です円の内側にテキストを配置します。これは、サイズの異なる画面には適していません。
points: {
backgroundColor: 'transparent',
position: 'absolute',
top: 72,
left: 56,
width: 90,
textAlign: 'center',
color: '#7591af',
fontSize: 50,
fontWeight: "100"
},
これは、これまでの私のコードですが、私はそれが違いを画面サイズに来るとき、できるだけ動的にする私のサークルのサイズを設計しました。
<View tabLabel='Progress' style={styles.progress}>
<View style={styles.progressView}>
<AnimatedCircularProgress
size={0.8*deviceWidth}
width={0.08*deviceWidth}
fill={this.state.progressSliderValue}
tintColor="#1A81FF"
backgroundColor="#EBEBF1">
</AnimatedCircularProgress>
</View>
<View style={styles.progressViewText}>
<Text style={styles.mileageText}>{this.state.patientMileageStatic}</Text>
<Text style={styles.kmText}>KM</Text>
<Text style={styles.targetText}>Target: {this.state.patientTarget} km</Text>
</View>
<View style={styles.sosButtonWrapper}>
<TouchableHighlight
underlayColor="gray"
onPress={this.sosPressed}
style={styles.sosButton}>
<Text style={styles.buttonText}>SOS</Text>
</TouchableHighlight>
</View>
</View>
だから私はそれ円に親戚、そしていつもはセンタリングされるような方法で、私の円の内側に緑色のボックスを配置しようとしています。
回避策はありますか？ドキュメントは十分な説明を提供していません。
