React Native kann die Nummer nicht korrekt anzeigen ⇐ Android

[Anonymous]

Ich verwende React Native zum Schreiben einer Anwendung in Android, aber die Nummer kann nicht korrekt angezeigt werden. Die Bestellnummer sieht so aus: 18,19,2, 21,2, 2, das Bild ist unten:


Einiger Code lautet:

Code: Select all

         
{selectedDate ? (


{selectedDate} 的待办任务数量：

{currentTasks.length > 0 && (

{currentTasks.length}

)}

) : (

Anderer Code ist:

Code: Select all

        renderItem={({ item, index }) => (



{index + 1}

{item}


 deleteTask(selectedDate, index)} style={styles.leftDeleteBtn}>
删除

 finishTask(selectedDate, index)} style={styles.rightDoneBtn}>
做完



)}
/>

Und der Stilcode lautet:

Code: Select all

const styles = StyleSheet.create({
container: { flex: 1 },
dateText: { fontSize: 18, fontWeight: 'bold', marginBottom: 10 },
taskItem: { padding: 12, marginVertical: 6, borderRadius: 10 },
taskRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 8 },
circle: { width: 28, height: 28, borderRadius: 14, justifyContent: 'center', alignItems: 'center', marginRight: 10 },
circleText: { color: '#fff', fontWeight: 'bold' },
taskText: { fontSize: 17, flexShrink: 1 },
taskButtonsRow: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 6 },
leftDeleteBtn: { backgroundColor: '#C62828', paddingHorizontal: 20, paddingVertical: 10, borderRadius: 8 },
leftDeleteText: { color: 'white', fontSize: 16 },
rightDoneBtn: { backgroundColor: '#4CAF50', paddingHorizontal: 20, paddingVertical: 10, borderRadius: 8 },
rightDoneText: { color: 'white', fontSize: 16 },
inputContainer: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
padding: 10,
borderTopWidth: 1,
borderColor: '#ccc',
flexDirection: 'row',
alignItems: 'center',
},
input: { flex: 1, borderWidth: 1, borderRadius: 8, padding: 10, marginRight: 10 },
});

Wo liegt der Fehler? Und wie kann man es lösen? Vielen Dank im Voraus.