React Native не может правильно отображать номер ⇐ Javascript

[Anonymous]

Я использую React Native для написания приложения на Android, но он не может правильно отобразить номер. Номер заказа такой: 18,19,2,21,2,2, рисунок ниже:


Некоторый код:

Код: Выделить всё

         
{selectedDate ? (


{selectedDate} 的待办任务数量：

{currentTasks.length > 0 && (

{currentTasks.length}

)}

) : (

Другой код:

Код: Выделить всё

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



{index + 1}

{item}


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

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



)}
/>

И код стилей:

Код: Выделить всё

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

Где ошибка? И как это решить? Заранее спасибо.

Подробнее здесь: https://stackoverflow.com/questions/798 ... lay-number