React Native / TextInput 박스 안에 button 넣기

 

 

이런 모양처럼 TextInput 박스 안에 button을 넣고 싶었다.

구선생님이 알려주신 방법으로 문제 해결

 

 

수정 전 코드

<View style={{...globalStyles.contentContainer, ...globalStyles.inputBox }}>
       <TextInput placeholder="아이디"/>
       <TouchableOpacity activeOpacity={0.8} style={styles.button} >
           <Text style={styles.authFont}>중복확인</Text>
       </TouchableOpacity>
</View>

 

 

수정 후 코드

<View style={{...globalStyles.contentContainer, ...globalStyles.inputBox }}>
    <View style={styles.phoneBox}>
         <View style={{flex:5}}>
              <TextInput placeholder="아이디"/>
          </View>
          <View style={{flex:3, alignItems:'flex-end'}}>
              <TouchableOpacity activeOpacity={0.8} style={styles.button}>
                  <Text style={styles.authFont}>중복확인</Text>
              </TouchableOpacity>
          </View>
     </View>
</View>

 

 

 

 

const styles = StyleSheet.create({
    button:{
        width:'90%'
    },
    phoneBox:{
        flexDirection:'row',
        marginTop:15, 
        paddingHorizontal: 5, 
        paddingVertical: 6, 
        borderBottomWidth:1,
        borderBottomColor:'#ddd', 
        width: '100%',
    },
    authFont:{
        color:"#808080",
        paddingHorizontal: 6,
        fontWeight:'bold',
        fontSize: 16,
        fontFamily: 'nanumB',
    }

 

 

 

 

 

 

 

 

https://stackoverflow.com/questions/41863653/button-in-textinput-in-react-native

해당 URL에서 힌트를 얻음

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