TextInput在本机iOS中做出反应

Question

我有一个反应原生的TextInput组件

<TextInput
            style={styles.searchBar}
            value={this.state.searchText}
            onChange={this.setSearchText.bind(this)}
            placeholder='Search State'
         />

这在android中工作得很好,但Textbox没有在iOS应用中显示.并且,没有什么可以找到问题所在.

任何人都可以帮助解决这个问题吗？

Answer 1

这是一个代码示例,演示了TextInput在iOS上为组件提供高度的必要性.它没有在文档中明确说明,但仔细查看它会注意到代码示例的iOS部分提供了一个高度而android示例没有.这是一个完整的代码示例,它TextInput在视图的中心显示:

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

class MyApp extends Component {
  constructor (props) {
    super(props);
    this.state = {
      searchText: ''
    };
  }

  setSearchText (e) {
    this.setState({
      searchText: e.target.value
    });
  }

  render () {
    return (
      <View style={styles.container}>
        <TextInput
              style={styles.searchBar}
              value={this.state.searchText}
              onChange={this.setSearchText.bind(this)}
              placeholder='Search State'
           />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  searchBar: {
    borderWidth: 1,
    height: 40
  }
});

AppRegistry.registerComponent('MyApp', () => MyApp);

如果这在调试代码时没有帮助作为一个完整性检查,请发布styles.searchBar您为您配置的样式定义(),TextInput以便我们可以给出更好的测试.

Answer 2

您应该指定文本输入的高度和宽度以将文本输入显示为：

<Textinput style={{height:200, width:300}}/>