React Native의 TextInput에 100 % 너비를 설정하는 방법은 무엇입니까?

Question

나는 YouTube를보고있는 React Native를 사용하여 간단한 To-Do 어플리케이션을 만들고 있습니다. 차이점은 비디오와 저입니다. 내 버전은 최신 RN이며, 안드로이드에서 응용 프로그램을 시뮬레이션합니다.

코드는 동일한 것처럼 보이지만 내 TextInput 폭은 100 %가 아니라 아주 작은 요소는 당신이

내 코드가 어떻게 그것을 해결하기 위해, 다음과 같습니다 볼 수?

import React, {Component} from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
    TextInput, 
} from 'react-native'; 

export default class Main extends Component { 
    render() { 
     return (
      <View style={styles.wrapper}> 
       <View style={styles.topBar}> 
        <Text style={styles.title}> 
         To-Do List 
        </Text> 
       </View> 
       <View style={styles.inputWrapper}> 
        <TextInput 
         style={styles.input}/> 
       </View> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    wrapper: { 
     flex: 1, 
     justifyContent: 'flex-start', 
     alignItems: 'stretch' 
    }, 
    topBar: { 
     padding: 16, 
     flexDirection: 'row', 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#2ecc71' 
    }, 
    title: { 
     color: 'white', 
     fontSize: 20 
    }, 
    inputWrapper: { 
     padding: 10, 
     flexDirection: 'row', 
     alignItems: 'stretch', 
     backgroundColor: 'green', 
     borderColor: 'red' 
    }, 
    input: { 
     height: 26, 
     borderRadius: 8, 
     backgroundColor: 'white' 
    } 


}); 

Answer 1

inputWrapper에서 flexDirection 스타일을 제거하십시오.

See it here.