Así es como agregamos dinámicamente elementos en el script java de vainilla, ¿cómo podría lograrse esto en react-native?
let Message = '<div class="text-right " style="padding-bottom:5px;border-radius:25px;width:100%">' + '<div class="pl-5" style="background:#f1f0e8 ;border-radius:25px;width:100%;">' + '<p class="pr-2 message" style="border-radius:25px;background-color:rgb(192, 192, 192);width:100%">' + $scope.message + '<small>sent now</small>' + '</p>' + '</div>' + '</div>'; $('.chat-box').append(Message) $scope.message = "";La lógica para esto sigue siendo la misma tanto en react como en react-native. Necesita un estado que contenga la lista de contenidos y debe mapear ese estado para reaccionar componentes. Al presionar el botón, debe agregar otro elemento de contenido. A diferencia de Vanilla js, no debe intentar almacenar componentes como una cadena, sino usar como el siguiente ejemplo
import React, { useState } from 'react'; import { Text, View, StyleSheet, Button } from 'react-native'; export default function App() { // The state containing the content array which is set default to an empty array const [messages, setMessages] = useState([]); return ( <View style={styles.container}> <View> {/* Map the state to a component list */} {messages.map((msg, index) => ( <Text key={'msg-' + index}>Random Number Added - {msg.message}</Text> ))} </View> <View style={{ flexDirection: 'row',justifyContent: 'space-between' }}> <Button // Append a new message onPress={() => setMessages((m) => [...m, { message: Math.random() }])} title="Add" /> <Button onPress={() => setMessages([])} title="Clear" /> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'space-between', backgroundColor: '#ecf0f1', padding: 8, }, });Demostración en vivo del código: https://snack.expo.dev/@arnabxd/stackoverflow-72606009
Debe tener una comprensión básica de los estados en react .