无法设置按钮的样式react-native

Question

我是跨平台开发的新手。 我创建了按钮组件，但是无法为其设置样式。 这样的印象是该按钮没有读入我的代码。 这是我如何在代码中创建按钮的示例

<Button
      style={{fontSize: 15, width:345, height: 75, marginTop:10,
        borderRadius:10, borderWidth: 1, borderColor: '#fff'}}
      styleDisabled={{color: 'red'}}
      onPress={() => this._handlePressContinue()}
      title="Continue"
      color='rgba(0,0,0,0.2)'
      backgroundColor="black"
    >
    </Button>

    <Button
      style={{fontSize: 15, width:345, height: 75, marginTop:10, color: 'green'}}
      onPress={() => this._handlePressForgotYourPassword()}
      title="Forgot Your Password"
      color='rgba(0,0,0,0.2)'
    >
    </Button>

我得到两个白色按钮，一个接一个。 仅更改标题，标题颜色和处理程序。 在决定或建议方面的任何帮助将不胜感激。 谢谢！

在此处输入图片说明

Answer 1

强烈建议您不要使用内联样式，而应使用单独的常量输入样式并将其应用于元素。 另外，建议使用“ react-native”库提供的样式表。 下面是一个小的演示代码（来自react native docs）。

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class LotsOfStyles extends Component {
  render() {
    return (
      <View>
        <Text style={styles.red}>just red</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  myTextStyle: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

这可能不是您现在面临的问题，但是如果您将代码重构为这种方法，我想它可以正常工作。

Answer 2

我决定了我的问题。 也许这会很有用：我借助以下命令创建了按钮的组件

<Button
    style={styles.forgotPass}
      onPress={this.GetValueFunction}
      title="Forgot Your Password"
      color='rgba(0,0,0,0.2)'
    >
    </Button>

一旦我使用了组件TouchableHighlight，一切就正常了。 这是一个例子

<TouchableHighlight
    style={styles.forgotPass}
    onPress={this._onPressButton}>
      <Text>Forgot Your Password?</Text>
    </TouchableHighlight>

谢谢大家的帮助