Question

我对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 }}
/>

我尝试了多种方法，但是样式并未应用到我创建的按钮上。

以下是屏幕截图：

“让我们开始吧”是按钮，无论它具有默认的蓝色文本。我怎样才能解决这个问题？有人可以帮我吗？

Answer 1

您的Button组件是从react-native导入的吗？如果是，则无法对其设置样式，因为如其documentation所述，以下是受支持的道具，buttonStyle不受支持。另外，也许您可以尝试使用react-native-elements或NativeBase

中的Button等其他软件包

onPress
标题
accessibilityLabel
颜色
已禁用
testID
具有TVPreferredFocus

Answer 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

Answer 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
      },
    });

React Native：无法设置按钮样式

3 个答案: