javascript - react native : TextInput disappears when put into View

Question

目前，我正在借助一本书学习 React Native，书中解释了如何构建待办应用程序。但是，由于此错误/错误，我无法继续。这发生在 IOS 中，不确定这是否也发生在 Android 上，因为我还没有设置我的 Android 模拟器只是 jet。

我的 <View>容器有两个 <TextInputs> ，工作正常。 当我将两个输入都包装到 View 中时，它们就会“消失”。

这是我的组件 NoteScreen.js:

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

export default class NoteScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.inputContainer}>
                    <TextInput 
                        ref="title" 
                        autoFocus={true} 
                               autoCapitalize="sentences"
            placeholder="Untitled"
            style={styles.title}

            onEndEditing={(text) => {this.refs.body.focus()}}
          />
        </View>
        <View style={styles.inputContainer}>
          <TextInput
            ref="body"
            multiline={true}
            placeholder="Start typing"
            style={styles.body}

            textAlignVertical="top"
            underlineColorAndroid="transparent"
          />
        </View>
        </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 64
    },
    textInput: {
        color: '#ffffff',
        flex: 1,
        width: 60,
        height: 60,
        fontSize: 16
    },
    inputContainer: {
        borderBottomColor: '#9E7CE3',
        borderBottomWidth: 1,
        flex: 1,
        flexDirection: 'row',
        marginBottom: 10
    },
    title: {
        fontFamily: 'Overpass-Bold',
        height: 40
    },
    body: {
        fontFamily: 'Overpass-Bold',
        flex: 1
    }
});

我做了一些研究，发现了一些奇怪的事情；

• 我的两个输入都有宽度和高度
• 如果没有应用任何样式，输入也会消失
• 这只发生在文本输入时，普通文本只会呈现。

一些见解会很棒，我认为这是一个错误，或者我只是忽略了一些东西..

Answer 1

我尝试了您的示例(在 Android 上)，并且使用您提供的确切代码，屏幕完全是空的。如果文本输入没有样式，它们就不会显示，并且您已将 styles.title 和 styles.body 设置为 TextInput 组件 -> 在 styles.title 和 styles.body 中您没有(两者)宽度和高度。所以你可以做的是:

• 将 width 添加到您的标题和正文样式中

或

• 将样式添加到数组中的文本输入，并将样式应用于 textInput 和标题/正文，如下所示:style={[styles.textInput, styles.title]} 和 style= {[styles.textInput, styles.body]}

这是我给你的两个建议的工作代码:

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

export default class NoteScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.inputContainer}>
                    <TextInput
                        ref="title"
                        autoFocus={true}
                        autoCapitalize="sentences"
                        placeholder="Untitled"
                        style={styles.title}

                        onEndEditing={(text) => {this.refs.body.focus()}}
                    />
                </View>
                <View style={styles.inputContainer}>
                    <TextInput
                        ref="body"
                        multiline={true}
                        placeholder="Start typing"
                        style={[styles.textInput, styles.body]}

                        textAlignVertical="top"
                        underlineColorAndroid="transparent"
                    />
                </View>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 64
    },
    textInput: {
        color: '#ffffff',
        flex: 1,
        width: 60,
        height: 60,
        fontSize: 16
    },
    inputContainer: {
        borderBottomColor: '#9E7CE3',
        borderBottomWidth: 1,
        flex: 1,
        flexDirection: 'row',
        marginBottom: 10
    },
    title: {
        fontFamily: 'Overpass-Bold',
        height: 40,
        width: 40
    },
    body: {
        fontFamily: 'Overpass-Bold',
        flex: 1
    }

});