Блог

Я хочу иметь возможность добавлять <Text> элемент нажатием кнопки в 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%',
    }
});
  

Спасибо!

Вам нужно определить часть состояния и инициализировать его с помощью 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 amp;amp; <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%',
    }
});