Кнопка в TextInput в реакции родной

Question

Как я могу вставить и стиль кнопку в вводе текста в реакции родной, как это:

Могу ли я использовать любой код, как это?

<Textinput> 
    <Button></Button> 
</Textinput> 

Answer 1

обертывание как в View с flexDirection:row должны получить вас там.

Если вы хотите перейти на более продвинутый уровень, вы можете посмотреть пакет react-native-textinput-effects, который предоставит вам очень вскользь вложенные входы.

Answer 2

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

, если вы не используете реагируют чужеродные-вектор-иконки заменить значок с увеличительным стеклом .png изображение

Answer 3

Извините за задержку, но что-то, как это должно работать:

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

где вы настраиваете размер на основе вашего изображения, а кнопка импортируется как:

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

Мне нравится держать t он находится во внешней папке, где он похож:

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; 

Удачи вам!