Javascript 按react native中的按钮添加DOM元素

我希望能够通过按react native中的按钮来添加

元素 这可能吗？我该怎么做呢？
我的代码：

   
import React, { Component } from 'react'
import { StyleSheet, Text, View, Button } from 'react-native'

export default class App extends Component {   
    onPress = () => {
        //some script to add text
    }
    
    render() {

    return ( 
        <View style = { styles.container }>
            <View style = { styles.ButtonContainer }>
                //i want to add text here
                <Button 
                    onPress={this.onPress}
                    title="Add item"
                    color="#FB3640"
                    accessibilityLabel="Add item"
                    containerViewStyle={{width: '100%', marginLeft: 0}}
                />
            </View>
        </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        alignItems: 'center',
    },
    text: {
        marginTop: 100,
    },
    ButtonContainer: {
        margin: 20,
        width: '90%',
    }
});

从“React”导入React，{Component}
从“react native”导入{样式表、文本、视图、按钮}
导出默认类应用程序扩展组件{
onPress=（）=>{
//一些脚本可以添加文本
}
render（）{
报税表（
//我想在这里添加文本
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
justifyContent:'之间的空间'，
背景颜色：“#fff”，
对齐项目：“居中”，
},
正文：{
玛金托普：100，
},
按钮容器：{
差额：20，
宽度：“90%”，
}
});

---

谢谢大家!

您需要定义一段状态并用false初始化它。当用户按下按钮时，您必须将此状态切换为true。有关当地州的更多信息，请查看此处：

类似的方法应该会奏效：

import React, { Component } from 'react'
import { StyleSheet, Text, View, Button } from 'react-native'

export default class App extends Component {
    state = {
        displayText: false
    }

    onPress = () => {
        this.setState({ displayText: true });
    }
    
    render() {
        return ( 
            <View style = { styles.container }>
                <View style = { styles.ButtonContainer }>
                    {displayText && <Text>This is my text</Text>}
                    <Button 
                        onPress={this.onPress}
                        title="Add item"
                        color="#FB3640"
                        accessibilityLabel="Add item"
                        containerViewStyle={{width: '100%', marginLeft: 0}}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        alignItems: 'center',
    },
    text: {
        marginTop: 100,
    },
    ButtonContainer: {
        margin: 20,
        width: '90%',
    }
});

import React，{Component}来自“React”
从“react native”导入{样式表、文本、视图、按钮}
导出默认类应用程序扩展组件{
状态={
displayText:false
}
onPress=（）=>{
this.setState（{displayText:true}）；
}
render（）{
报税表（
{displayText&&这是我的文本}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
justifyContent:'之间的空间'，
背景颜色：“#fff”，
对齐项目：“居中”，
},
正文：{
玛金托普：100，
},
按钮容器：{
差额：20，
宽度：“90%”，
}
});