React-Native Button样式不起作用 [英] React-Native Button style not work

问题描述

import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';

这是我的React Button代码，但是样式无法正常运行...

This my React Button code But style not working Hare ...

<Button
  onPress={this.onPress.bind(this)} 
  title={"Go Back"}
  style={{color: 'red', marginTop: 10, padding: 10}}
/>

我也尝试使用此代码

<Button 
       containerStyle={{padding:10, height:45, overflow:'hidden', 
       borderRadius:4, backgroundColor: 'white'}}
       style={{fontSize: 20, color: 'green'}} 
       onPress={this.onPress.bind(this)} title={"Go Back"}
      > Press me!
</Button>

更新问题:

我也尝试过这种方式.

Update Question:

Also I was try by This way..

<Button
    onPress={this.onPress.bind(this)}
    title={"Go Back"}
    style={styles.buttonStyle}
>ku ka</Button>

样式

const styles = StyleSheet.create({
    buttonStyle: {
        color: 'red',
        marginTop: 20,
        padding: 20,
        backgroundColor: 'green'
    }
});

但是没有输出: 我的手机屏幕截图:-

But No out put: Screenshot of my phone:-

推荐答案

React Native Button (执行本机按钮)的功能非常有限，请参见； 按钮

The React Native Button is very limited in what you can do, see; Button

它没有样式道具，并且您未通过<Button>txt</Button>这样的网页方式"设置文本，而是通过title属性<Button title="txt" />

It does not have a style prop, and you don't set text the "web-way" like <Button>txt</Button> but via the title property <Button title="txt" />

如果您希望对外观进行更多控制，则应使用诸如 TouchableOpacity 它们真的很容易使用:-)

If you want to have more control over the appearance you should use one of the TouchableXXXX' components like TouchableOpacity They are really easy to use :-)

这篇关于React-Native Button样式不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！