反应本机iOS中的TextInput答案

【问题标题】：TextInput in react native iOS反应本机iOS中的TextInput
【发布时间】：2016-10-24 02:37:11
【问题描述】：

我在 react native 中有一个 TextInput 组件

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

这在 android 中运行良好，但在 iOS 应用程序中没有显示 Textbox。而且，没有什么可以找到问题所在。

有人可以帮忙解决这个问题吗？

【问题讨论】：

标签： react-native textinput

【解决方案1】：

这是一个代码示例，演示了需要为 iOS 上的TextInput 组件提供高度。 docs 中没有明确说明，但仔细查看它，您会注意到代码示例的 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);

如果这对调试代码没有帮助，请发布您为 TextInput 配置的样式定义 (styles.searchBar)，以便我们进行更好的测试。

【讨论】：

谢谢。有效。我错过了样式属性

【解决方案2】：

你应该给文本输入的高度和宽度以将文本输入显示为：

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

【讨论】：

它仍然没有出现。而且，它在android bdw中工作。 iOS 有什么不同吗？