在 React Native 中按下按鈕添加 DOM 元素

Question

我希望能夠通過在 react native 中按下按鈕來添加<Text>元素 這可能嗎？ 我該怎么做？
我的代碼：

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

謝謝 ！

Answer 1

您需要定義一個狀態並使用 false 對其進行初始化。 當用戶按下按鈕時，您必須將此狀態切換為 true。 在這里查看有關本地狀態的更多信息： https : //reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

這樣的事情應該工作：

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