状态未显示在我的文本组件React Native中

Question

我正在尝试以某个状态初始化父组件中的Text组件，但它根本没有显示。这应该是非常简单的事情，而且我之前已经做过多次，在这里我做错了什么？文本组件中没有任何显示。这是组件代码：

import React from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';

export class GeneralInput extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            placeholder: this.props.placeholder,
            inputValue: "",
            inputting: false,
            validationMessage: "This is a required field",
            validationStyles: styles.noValidation,
        };
     }
    whenInputIsFocused() {
        this.setState({placeholder: ""});
    }
    whenInputIsBlurred() {
        this.setState({validationMessage: "This field is required"});
/*      if (this.state.inputValue === "") {
            this.setState({placeholder: this.props.placeholder});
        }*/
    }
    storeValue = (inputValue) => {
        this.setState({inputValue});
        this.props.onChange({key: this.props.fieldId, value: inputValue});
    }
    focusNextField(nextField) { this.refs[nextField].focus(); }

  render() {
    const autoFocus = this.props.autoFocus == 'true';
    const multiline = this.props.multiline == 'true';
    return(
        <View style={styles.outerContainer}>
            <Text style={styles.labelText}>{this.props.labelText}</Text>
            <View style={styles.inputContainer}>
                <TextInput 
                    autoCapitalize='none' 
                    autoFocus={this.props.autoFocus}
                    onChangeText={this.storeValue}
                    value={this.state.inputValue} 
                    secureTextEntry={this.props.secureTextEntry} 
                    onBlur={this.whenInputIsBlurred.bind(this)} 
                    onFocus={this.whenInputIsFocused.bind(this)} 
                    underlineColorAndroid="transparent" 
                    keyboardType={this.props.type} 
                    returnKeyType={this.props.returnKeyType} 
                    placeholder={this.state.placeholder} 
                    placeholderTextColor='rgba(255, 255, 255, 0.3)'
                    multiline={multiline}
                    selectTextOnFocus={false}
                    onSubmitEditing={() => {this.focusNextField(this.props.ref)}}
                    blurOnSubmit={(this.props.moveAlongType === 'next') ? false : true}
                    style={styles.inputStyles} />
                    <Text style={styles.validationText}>{this.state.validationMessage}</Text>
                </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
    outerContainer: {
        justifyContent: 'center',
        alignItems: 'flex-start',
        width: '90%',
        marginBottom: 20,
    },
    labelText: {
        fontFamily: 'rubik-bold',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#fff',
        marginBottom: 5,
    },
    inputContainer: {
        height: 40,
        width: '100%',
        backgroundColor: 'rgba(255, 255, 255, 0.3);',
        shadowColor: 'rgba(0, 0, 0, 0.15)',
        shadowOffset: {width: 0,height: 2},
        shadowOpacity: 0,
        shadowRadius: 0,
        borderRadius: 2,
    },
    inputStyles: {
        height: '100%',
        width: '100%',
        fontSize: 14,
        color: '#fff',
        paddingLeft: 15,
        fontFamily: 'rubik-bold',
    },
    validationText: {
        color: '#e16e17',
        fontSize: 12,
        fontFamily: 'rubik-bold',
        marginTop: 3,
        display: 'none',
    },
});

Answer 1

假设您是这个意思

<Text style={styles.validationText}>{this.state.validationMessage}</Text>

您的样式具有

validationText: {
    color: '#e16e17',
    fontSize: 12,
    fontFamily: 'rubik-bold',
    marginTop: 3,
    display: 'none',
},

显示：“无”将使其不显示

Answer 2

我尝试了您的代码，并修改了文本区域的backgroundColor。

  .btn {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 17px;
   } 
   .btn > button{
        padding: 0 20px;
        height: 40px;
        font-size: 1em;
        font-weight: 700;
        text-transform: uppercase;
        border: 2px black solid;
        border-radius: 1px;
        background: transparent;
        cursor: pointer;
   }

我明白了，我相信这是您想要的：

您要在白色背景上显示文字吗？