React Native 元素仅在按下按钮后可见/可用

Question

React Native 新手，正在尝试应用创意。基本上我只是想创建一个当我按下按钮时出现的 TextInput 元素。下面是我的尝试。我正在尝试利用课堂上的状态，但有些东西不对劲。

Expo 抛出“null 不是对象（评估 'this.state.isShowingText'）”错误。

有什么想法吗？

import React, { Component } from 'react';
import { TextInput, Alert, Button, ScrollView, Text, View, StyleSheet } from 'react-native';

export default class CoolComponent extends Component {
  render() {
    const nameAdd = () =>{
      state = { isShowingText: true };
    }
    return (
      <View style={{ alignItems: 'center', top: 50 }}>
        <Title>Some Title</Title>
        {this.state.isShowingText ? <TextInput></TextInput> : null}
        <ScrollView></ScrollView>
        <Button
          title="Press me"
          onPress={nameAdd}
        />
      </View>
    );
  }
}

Answer 1

你处理state的方式不对

import React, { Component } from 'react';
import { TextInput, Button, ScrollView, View } from 'react-native';

export default class CoolComponent extends Component {
    state = {
        isShowingText: false
    }

    nameAdd = () => {
        this.setState({
            isShowingText: true
        })
    }

    render() {
        return (
            <View style={{ alignItems: 'center', top: 50 }}>
                {this.state.isShowingText ? <TextInput style={{ width: '50', height: '50', borderWidth: 1 }}></TextInput> : null}
                <ScrollView></ScrollView>
                <Button
                    title="Press me"
                    onPress={this.nameAdd}
                />
            </View>
        );
    }
}

希望这对您有所帮助。如有疑问，请随意。