我是跨平台开发的新手。我创建了按钮组件,但我无法为其设置样式。这种按钮不会读入我的代码的印象。以下是我在代码中创建按钮的示例
<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>
我得到两个白色按钮,一个在另一个旁边。仅更改标题,标题颜色和处理程序。我们非常感谢您对决定或建议的任何帮助。谢谢!
答案 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>
感谢所有帮助过的人