Я пытаюсь создать ячейку динамического размера для простого представления чата в React Native. Вопрос и ответы в ссылке Динамическая ширина и высота гибкого блока мне очень помогли, но я не заставлял применять динамическую ширину к ячейкам. Вот мой сотовый код.
class ChatCell extends React.Component {
render() {
return (
<View style = {{ marginTop: 10, marginBottom: 10 }}>
<View
style = {{
backgroundColor: "rgba(245,25,116,1)",
borderBottomLeftRadius: 12,
borderTopLeftRadius: 12,
borderTopRightRadius: 12,
marginLeft: 100,
marginRight: 15,
padding: 5,
flex: -1
}}
>
<Text
style = {{
padding: 5,
textAlign: "right",
fontFamily: "inter-medium",
color: "white"
}}
>
{this.props.message}
</Text>
</View>
</View>
);
}
}
А вот и скриншот того, что я сделал.
Моя проблема заключается в том, что когда я ввожу простое сообщение, такое как 'OK!', оно должно быть stretch по ширине. Итак, как я могу добиться этого, например, дать minimum width?
Я пытался добавить alignSelf:'stretch', но у меня это не сработало.
Какова недостающая часть того, что я делаю неправильно?
Спасибо,



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Пожалуйста, проверьте похожие вопросы здесь, здесь и здесь.
Вы можете попробовать добавить alignSelf: 'flex-start' или alignSelf:'baseline' в View, чтобы он соответствовал своему содержанию.
спасибо за простую подсказку. Я использовал alignSelf:'flex-start' и удалил marginLeftprop, после чего у меня сработало. Ранее я допустил ошибку, поместив блок alignSelf:'flex-start' не в containerView, а только в самый внешний вид. Спасибо
Хм, можно мне демо jFiddle?