TextInput- in reagieren nativen iOS

Question

ich eine Textinput-Komponente haben in nativen reagieren

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

Dies ist in android völlig in Ordnung zu arbeiten, aber Textbox ist nicht in iOS-App zeigt. Und es gibt kein was zu finden ist, was das Problem ist.

Kann jemand mit diesem Problem helfen?

Answer 1

sollten Sie die TextInput- Höhe und Breite geben Sie die Texteingabe angezeigt werden als:

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

Answer 2

Hier ein Codebeispiel ist, dass die Notwendigkeit zeigt, eine Höhe für die TextInput Komponente auf iOS zur Verfügung zu stellen. Es ist nicht explizit in der docs angegeben, aber überprüfen Sie es genau, werden Sie feststellen, dass der iOS-Abschnitt der Code-Beispiele eine Höhe bietet, während die Android-Proben nicht. Dies ist die komplette Codebeispiel, das eine TextInput in der Mitte der Ansicht zeigt:

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); 

Wenn dies nicht als eine Plausibilitätsprüfung hilft den Code in das Debuggen finden Sie in der Formatdefinition Post (styles.searchBar) Sie haben konfiguriert für Ihre TextInput, so können wir das einen besseren Test geben.