React Native：无法设置按钮样式答案

【问题标题】：React Native: Can't style the ButtonReact Native：无法设置按钮样式
【发布时间】：2018-06-28 03:26:52
【问题描述】：

我对 React Native 很陌生。我熟悉 React 并将其用于我的工作。 React Native 在将样式应用于组件方面似乎有所不同。

我在将样式应用到按钮时遇到问题。

这是我当前的代码：

<Button
  title="LET'S GET STARTED"

  onPress={() => {
    console.log('You tapped the Decrypt button!');
  }}
  buttonStyle={{
    backgroundColor: "#0A6ABB",
    width: 300,
    height: 45,
    borderColor: "#FFFFFF",
    borderWidth: 2,
    borderRadius: 5
  }}
  containerStyle={{ marginTop: 50 }}
/>

我尝试了多种方法，但样式没有应用到我创建的按钮。

下面是它的截图：

“让我们开始吧”是按钮，不管它是什么，它都只有默认的蓝色文本。我怎样才能解决这个问题？谁能帮我解决这个问题？

【问题讨论】：

您使用的是哪个框架，或者是香草反应原生元素？

标签： javascript css reactjs react-native

【解决方案1】：

您的Button 组件是从react-native 导入的吗？如果是，那么您无法设置它的样式，因为正如他们的documentation 所述，下面是支持的道具，buttonStyle 是不支持的道具。或者，也许您可以尝试其他软件包，例如来自 react-native-elements 或 NativeBase 的 Button

onPress
标题
可访问性标签
颜色
已禁用
测试ID
有TVPreferredFocus

【讨论】：

【解决方案2】：

Button 在本机反应方面非常有限。您可以改用TouchableOpacity，以获得更大的灵活性，请在此处查看documentation。

TouchableOpacity 示例：

render () {
  return (
    <TouchableOpacity
      style={styles.button}
      onPress={this.onPress} >
      <Text> LETS GET STARTED </Text>
    </TouchableOpacity>
  )
}
const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  },
});

还有不同种类的“按钮”，具体取决于您的需要，例如TouchableHighlight、TouchableWithoutFeedback

【讨论】：

【解决方案3】：

使用TouchableOpacity

import { StyleSheet, TouchableOpacity, Text }
render() {
      return (
        <TouchableOpacity
          style={styles.button}
          onPress={() => { console.log('You tapped the Decrypt button!'); }}
        >
          <Text> LET'S GET STARTED </Text>
        </TouchableOpacity>
      )
    }
    const styles = StyleSheet.create({
      button: {
        alignItems: 'center',
        backgroundColor: "#0A6ABB",
        width: 300,
        height: 45,
        borderColor: "#FFFFFF",
        borderWidth: 2,
        borderRadius: 5,
        marginTop: 50
      },
    });

【讨论】：