2016-06-30 3 views
0

React Native의 초보자로서 레이아웃을 살펴 보았습니다. 텍스트 입력 구성 요소와 텍스트 구성 요소가있는 구성 요소가 있습니다.텍스트 입력보기가 제대로 렌더링되지 않습니다.

class TextView extends Component{ 
render(){ 
return(
    <View style = {{flex:1,justifyContent:'center',alignItems:'center',backgroundColor: 'pink'}}> 
    <TextInput style = {TextInputStyle.default}/> 
    <Text> Hello again! </Text> 
    </View> 
) 
} 
} 

출력이 보인다 index.ios.js 루트 파일에 TextView 구성 요소를 호출 한 후. enter image description here

스타일 시트를 따르지만 텍스트 입력이 아닌 경우 텍스트 만 볼 수 있습니다. 어떤 도움을 주시면 감사하겠습니다.

편집

이 TextInputStyle가

const TextInputStyle = StyleSheet.create({ 
default : { 
    color : 'darkgrey', 
    fontSize : 14, 
    backgroundColor : 'red', 
    height : 20, 
    width : 100, 
    } 
}) 

답변

3

우선 어떻게 생겼는지, 당신은이 CSS 스타일을 무시되어있을 수 있습니다, 내부 TextInputStyle.default 무엇을 지정하지 않았습니다. 뷰에서 TextInput을 감싸는 것을 시도하십시오.

<View style = {{flex:1,justifyContent:'center',alignItems:'center',backgroundColor: 'pink'}}> 
     <View> 
      <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1, width:150}}/> 
     </View> 
     <Text> Hello again! </Text> 
    </View> 
+0

맞습니다. 'View' 컴포넌트에'TextInput'을 래핑 할 필요가있었습니다. –

관련 문제