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

下面是一個代碼示例，演示了為iOS上的TextInput組件提供高度的必要性。 它沒有在文檔中明確說明，但仔細查看它會注意到代碼示例的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 ），這樣我們就可以給出更好的測試。

Answer 2

你應該給textinput高度和寬度顯示textinput為：

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