react-native - react 原生iOS中的TextInput

Question

我在 React Native 中有一个 TextInput 组件

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

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

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

Answer 1

这是一个代码示例，演示了为 iOS 上的 TextInput 组件提供高度的必要性。它没有在 docs 中明确说明，但仔细查看它，您会注意到代码示例的 iOS 部分提供了高度，而 android 示例则没有。这是一个完整的代码示例，它在 View 的中心显示一个 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)，以便我们进行更好的测试。