用背景颜色反应原生边界半径答案

【问题标题】：React Native Border Radius with background color用背景颜色反应原生边界半径
【发布时间】：2016-05-04 00:21:14
【问题描述】：

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

【问题讨论】：

只是猜测，尝试将borderStyle: 'solid' 给submitText
不，很遗憾没用
您在哪个环境中测试？ ios还是安卓？

标签： javascript styles react-native

【解决方案1】：

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

【讨论】：

谢谢！ padding 也是另一个重要的关键。

【解决方案2】：

您应该将overflow: hidden 添加到您的样式中：

Js：

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

样式：

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

【讨论】：

overflow: 'hidden' 即使没有 react-native-button 也为我工作
谢谢。是的，将backgroundColor 和borderRadius 放在容器上，然后将overflow: 'hidden' 添加到容器中对我有用。（也没有使用react-native-button。）
这就是我想要的！（不是选中的）

【解决方案3】：

永远不要为您的<Text /> 提供borderRadius 始终将<Text /> 包裹在您的<View /> 或<TouchableOpacity/> 中。

<Text /> 上的borderRadius 可以在Android 设备上完美运行。但是在IOS设备上就不行了。

所以在你的练习中保持这一点，将你的<Text/> 包裹在你的<View/> 或<TouchableOpacity/> 上，然后将borderRadius 赋予<View /> 或<TouchableOpacity />，这样它就可以在Android 和Android 上运行。在 IOS 设备上。

例如：-

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

-谢谢

【讨论】：

【解决方案4】：

记住如果你想给 Text 一个 backgroundcolor ，然后在这种情况下还有borderRadius 也写溢出：'hidden' 你的具有背景颜色的文本也将获得半径，否则除非你用 View 包装它并给出 backgroundcolor 和 radius 否则它是不可能实现的给它。

<Text style={{ backgroundColor: 'black', color:'white', borderRadius:10, overflow:'hidden'}}>Dummy</Text>

【讨论】：

【解决方案5】：

应用下面的代码行：

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

【讨论】：