用背景颜色反应本机边界半径

96

在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'
},
...

javascript styles react-native

— 奇佩
source

只是猜测，尽量给borderStyle: 'solid'到submitText

— Cherniv

不，不幸的是，此方法无法正常工作

— Chipe 2016年

您正在哪个环境上进行测试？iOS或Android？

— 切尔诺夫'16

155

尝试将按钮样式移至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>

— 纳德·达比特（Nader Dabit）
source

2

谢谢！在padding还另一个重要的关键。

— DazChong

73

您应该添加overflow: hidden样式：

Js：

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

样式：

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

— 侯赛因
source

3

overflow: 'hidden'即使没有反应过来，本机按钮为我工作

— 埃文Siroky

2

谢谢。是的，将backgroundColor和borderRadius放在容器上，然后添加overflow: 'hidden'到容器中对我来说很有用。（也不要使用react-native-button。）

— 大卫

2

这就是我想要的！（不是选中的）

— Julien Malige

1

不要给borderRadius你<Text />总是换行<Text />内你<View />或你的<TouchableOpacity/>。

borderRadius on <Text />将在Android设备上完美运行。但是在IOS设备上，它将无法正常工作。

因此，保持这在实践中来包装<Text/>内的<View/>或<TouchableOpacity/>然后给borderRadius到<View />或<TouchableOpacity /> 使之在同时在Android和iOS设备上运行。

例如：-

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

-谢谢

— 穆库尔·索尼
source

0

应用下面的代码行：

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

— Sumit Kumar Pradhan
source