[javascript] 배경색으로 네이티브 테두리 반경 반응

Program / 글쓴이

React Native에서 borderRadius작동하지만 버튼에 지정된 배경색은 사각형으로 유지됩니다. 여기서 무슨 일이 일어나고 있습니까?

JS

<TouchableHighlight
  style={styles.submit}
  onPress={() => this.submitSuggestion(this.props)}
  underlayColor='#fff'>
    <Text style={[this.getFontSize(),styles.submitText]}>Submit</Text>
</TouchableHighlight>

스타일

...
submit:{
    marginRight:40,
    marginLeft:40,
    marginTop:10,
},
submitText:{
    paddingTop:20,
    paddingBottom:20,
    color:'#fff',
    textAlign:'center',
    backgroundColor:'#68a0cf',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: '#fff'
},
...

여기에 이미지 설명 입력

답변

버튼 스타일을 TouchableHighlight자체로 이동해보십시오 .

스타일 :

  submit:{
    marginRight:40,
    marginLeft:40,
    marginTop:10,
    paddingTop:20,
    paddingBottom:20,
    backgroundColor:'#68a0cf',
    borderRadius:10,
    borderWidth: 1,
    borderColor: '#fff'
  },
  submitText:{
      color:'#fff',
      textAlign:'center',
  }

버튼 (동일) :

<TouchableHighlight
  style={styles.submit}
  onPress={() => this.submitSuggestion(this.props)}
  underlayColor='#fff'>
    <Text style={[this.getFontSize(),styles.submitText]}>Submit</Text>
</TouchableHighlight>

여기에 이미지 설명 입력

답변

overflow: hidden스타일에 추가 해야합니다.

Js :

<Button style={styles.submit}>Submit</Button>

스타일 :

submit {
   backgroundColor: '#68a0cf';
   overflow: 'hidden';
}

답변

borderRadius를 <Text />항상 <Text />내부 <View />또는 <TouchableOpacity/>.

borderRadius on <Text />은 Android 기기에서 완벽하게 작동합니다. 그러나 IOS 장치에서는 작동하지 않습니다.

그래서 포장 당신의 연습이 계속 <Text/>내부 사용자 <View/>나에를 <TouchableOpacity/>하기 위해 borderRadius을 다음 줄이 <View />나 <TouchableOpacity /> 때문에 모두 안드로이드뿐만 아니라 IOS 장치에서 작동합니다.

예 :-

<TouchableOpacity style={{borderRadius: 15}}>
   <Text>Button Text</Text>
</TouchableOpacity>

-감사

답변

아래 코드 줄을 적용하십시오.

<TextInput
  style={{ height: 40, width: "95%", borderColor: 'gray', borderWidth: 2, borderRadius: 20,  marginBottom: 20, fontSize: 18, backgroundColor: '#68a0cf' }}
  // Adding hint in TextInput using Placeholder option.
  placeholder=" Enter Your First Name"
  // Making the Under line Transparent.
  underlineColorAndroid="transparent"
/>

답변