当用户按下按钮时，如何在react-native中实现下面的代码?

Question

这是我们如何在java脚本中动态添加元素，如何在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 = "";

Answer 1

这个逻辑在react和react-native中都是一样的。您需要一个包含内容列表的状态，并且必须将该状态映射到响应组件。按下按钮后，必须附加另一个内容项。不像普通的js，你不应该尝试将组件存储为字符串，而应该像下面的例子那样使用

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

代码的实时演示:https://snack.expo.dev/@arnabxd/stackoverflow-72606009

你需要对反应状态有一个基本的了解。