Question

目前我在一本书的帮助下学习了React Native，其中介绍了如何构建一个应用程序。但是由于这个错误/错误，我无法继续。这在IOS中发生，不确定这是否也发生在Android上，因为我还没有设置我的Android模拟器只是喷射。

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

这是我的组件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组件 - ＆gt;在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
    }

});

Answer 2

我相信我们正在阅读同一本书，因为我遇到了同样的问题。

我通过删除容器样式中的use strict; use warnings 'all'; open my $follow_fh, '-|', 'journalctl --follow' or die $!; print while <$follow_fh>;并将alignItems: 'center'添加到 inputContainer 样式来解决此问题。它仍然看起来不像书籍样本，但至少现在可以看到这些字段。

这是我的代码：

flex: 1

Answer 3

我用下面的代码解决了它：

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

export default class NoteScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.inputContainer}>
            <TextInput ref="title" autoFocus={true} autoCapitalize="sentences" placeholder="Untitled" style={[styles.textInput, 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]}/>
        </View>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    marginTop: 64
  },
  title: {
    height: 40
  },
  body: {
    height: 160,
    flex: 1
  },
  inputContainer: {
    borderBottomColor: '#9E7CE3',
    borderBottomWidth: 1,
    flexDirection: 'row',
    marginBottom: 10
  },
  textInput: {
    flex: 1,
    fontSize: 16,
    width: 300,
  }
});

Answer 4

如果<Text>中<View>没有身高，请尝试从容器中删除flex : 1。

React Native：TextInput在放入View

4 个答案: