- Taste, in den TextInput-in reagieren nativen

Wie kann ich einfügen und den Stil einer Schaltfläche text-Eingabe in reagieren nativen wie diese:
- Taste, in den TextInput-in reagieren nativen

Kann ich mit jedem solchen code?

<Textinput>
   <Button></Button>
</Textinput>
  • Sie wollen So einen touch auf das Symbol "suchen" zu nennen, "onSubmit"?
  • Ja, will ich.
InformationsquelleAutor Hossein | 2017-01-25
  1. 5

    Sorry für die Verspätung, aber so etwas wie dies funktionieren sollte:

    <View style={{flexDirection:'row', width: window.width, margin: 10, padding:4, alignItems:'center', justifyContent:'center', borderWidth:4, borderColor:'#888, borderRadius:10, backgroundColor:'#fff'}}>
  <View style={{flex:4}}>
    <TextInput
        onChangeText = {(textEntry) => {this.setState({searchText: textEntry})}}
        style={{backgroundColor:'transparent'}}
        onSubmitEditing = {()=>{this.onSubmit(this.state.searchText)}}
      />
  </View>
  <View style={{flex:1}}>
    <Button onPress={ () => this.onSubmit(this.state.searchText) }>
        <Image source={ require('../images/searchImage.png') } style={ { width: 50, height: 50 } } />
    </Button>
  </View>
</View>

    dem Sie die Größe anpassen, basierend auf Ihre Bild-und Button importiert werden wie:

    import Button from '../components/Button';

    Ich mag halten Sie die Taste in einem externen Ordner, wo es ist wie:

    import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';

class Button extends Component {
  handlePress(e) {
    if (this.props.onPress) {
        this.props.onPress(e);
    }
  }
  render() {
    return (
        <TouchableOpacity
            onPress={ this.handlePress.bind(this) }
            style={ this.props.style } >
            <Text>{ this.props.children }</Text>
        </TouchableOpacity>
    );
  }
}
export default Button;

    Glück!

    • Funktioniert dies nicht, setzen Sie das Lupe-Symbol in der text-Eingabe-Feld.
    • ja, Sie sollten wirklich ein screenshot, wie das aussieht. Es gibt keine Möglichkeit, dieser code erzeugt das gewünschte Ergebnis.
    InformationsquelleAutor kwishnu
  2. 3

    Verpackung sowohl in einer View mit flexDirection:row sollten Sie dort bekommen.

    Wenn Sie möchten, um mehr erweiterte, Sie betrachten könnte die reagieren-native-textinput-Effekte - Paket, das gibt Ihnen einige sehr schön gestalteten Eingänge.

    InformationsquelleAutor Talor A
  3. 3
    <View style={{flexDirection:'row'}}>
    <View>
      <TextInput
          style={{alignItems:'center',justifyContent:'center',backgroundColor:'white'}}
          value = {this.state.searchString}
          onChangeText = {(searchString) => {this.setState({searchString})}}
          placeholder = 'Search'
          keyboardType = 'web-search'
          onSubmitEditing = {()=>{this._fetchResults()}}
          ref = 'searchBar'
          />
    </View>
    <TouchableHighlight style={{alignItems:'center',justifyContent:'center'}} onPress = {()=>{this._fetchResults()}} underlayColor = 'transparent'>
        <View>
          <Icon name="search" size = {20} color = "#4285F4" />
        </View>
    </TouchableHighlight>
</View>

    wenn Sie nicht reagieren-native-Vektor-Symbole Symbol "ersetzen" mit .png-Lupe Bild

    InformationsquelleAutor Vikram Belde
Schreibe einen Kommentar