버튼이 같은 기본 반응에

Question

가 어떻게 텍스트 입력에 버튼을 삽입하고 스타일 수 있습니다 기본 반응?

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

Answer 1

가 당신을 얻을해야 flexDirection:row와 View 모두 포장.

고급 기능을 원할 경우 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'; 

저는 외부 폴더에있는 버튼은 다음과 같습니다.

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; 

행운을 빕니다!