导入_this

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

这是我的 React Button 代码但样式不起作用 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>

更新问题：

我也试过这种方式..

<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'
    }
});

但没有输出：我的手机截图：-

4个回答

该阵营本土按钮在你能做什么非常有限的，看见了; 按钮

它没有style prop，并且您不会像“网络方式”那样设置文本，<Button>txt</Button>而是通过 title 属性<Button title="txt" />

如果你想对外观有更多的控制，你应该使用 TouchableXXXX 的组件之一，比如TouchableOpacity 它们真的很容易使用:-)

我的边距和填充有问题Button。我在View组件中添加了 Button并将您的属性应用于View.

<View style={{margin:10}}>
<Button
  title="Decrypt Data"
  color="orange"
  accessibilityLabel="Tap to Decrypt Data"
  onPress={() => {
    Alert.alert('You tapped the Decrypt button!');
  }}
  />  
</View>

React Native 按钮提供的选项非常有限。您可以使用 TouchableHighlight 或 TouchableOpacity 通过设置这些元素的样式并像这样用它包裹您的按钮

             <TouchableHighlight 
                style ={{
                    height: 40,
                    width:160,
                    borderRadius:10,
                    backgroundColor : "yellow",
                    marginLeft :50,
                    marginRight:50,
                    marginTop :20
                }}>
            <Button onPress={this._onPressButton}            
            title="SAVE"
            accessibilityLabel="Learn more about this button"
          /> 
          </TouchableHighlight>

你也可以使用 react 库来定制按钮。一个不错的库是 react-native-button ( https://www.npmjs.com/package/react-native-button )

如果您不想创建自己的按钮组件，一个快速而肮脏的解决方案是将按钮包装在视图中，这至少允许您应用布局样式。

例如，这将创建一行按钮：

<View style={{flexDirection: 'row'}}>
    <View style={{flex:1 , marginRight:10}} >
        <Button title="Save" onPress={() => {}}></Button>
    </View>
    <View style={{flex:1}} >
        <Button title="Cancel" onPress={() => {}}></Button>
    </View>
</View>

其它你可能感兴趣的问题

上一篇生产紧密配合的零件下一篇第二层：缝隙、附着力差——为什么？