React-Native Button样式不起作用

Question

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

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

Answer 1

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

它没有样式道具,并且您不会将文本设置为"web-way",<Button>txt</Button>而是通过title属性<Button title="txt" />

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

Answer 2

我有一个问题的边距和填充与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>

Answer 3

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

例如,这将创建一行按钮:

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

Answer 4

而不是使用 button 。您可以在 react native 中使用 Text ，然后使其可触摸

<TouchableOpacity onPress={this._onPressButton}> 
   <Text style = {'your custome style'}>
       button name
   </Text>
</TouchableOpacity >

Answer 5

按钮中的样式不起作用，您必须为视图提供样式。

<View style={styles.styleLoginBtn}>
          <Button
            color="orange" //button color
            onPress={this.onPressButton}
            title="Login"
          />
        </View>

给这个样式查看

const styles = StyleSheet.create({
  styleLoginBtn: {
    marginTop: 30,
    marginLeft: 50,
    marginRight: 50,
    borderWidth: 2,
    borderRadius: 20,
    borderColor: "black", //button background/border color
    overflow: "hidden",
    marginBottom: 10,
  },
});

Answer 6

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）