无法设置按钮react-native

时间:2017-11-29 12:10:16

标签: javascript ios objective-c reactjs react-native

我是跨平台开发的新手。我创建了按钮组件,但我无法为其设置样式。这种按钮不会读入我的代码的印象。以下是我在代码中创建按钮的示例

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

我得到两个白色按钮,一个在另一个旁边。仅更改标题,标题颜色和处理程序。我们非常感谢您对决定或建议的任何帮助。谢谢!

enter image description here

2 个答案:

答案 0 :(得分:0)

强烈建议您不要使用内联样式,而是使用单独的常量输入样式并将其应用于元素。此外,建议用户使用'react-native'库提供的样式表。下面是一个小的演示代码(From 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',
  },
});

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

答案 1 :(得分:0)

我决定了我的问题。也许这将是有用的:我在帮助下创建了按钮的一个组件

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

感谢所有帮助过的人