Стиль реактивной кнопки не работает

Import_this

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

Это мой код кнопки React, но стиль не работает, заяц...

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

Style

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

Но нет, поставь: Скриншот моего телефона: -

Ответ 1

Кнопка React Native Button очень ограничена тем, что вы можете сделать, см. Button

У него нет стиля, и вы не задаете текст "веб-способом", как <Button>txt</Button>, но через свойство title <Button title="txt" />

Если вы хотите больше контролировать внешний вид, вы должны использовать один из компонентов TouchableXXXX, например TouchableOpacity Они действительно просты в использовании: -)

Ответ 2

У меня была проблема с полем и отступом с Button. Я добавил Button в компонент View и применил ваши свойства к 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>

Ответ 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>

Ответ 4

Кнопки 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>

Вы также можете использовать библиотеку реагирования для настраиваемой кнопки. Одна хорошая библиотека - кнопка реагирования (https://www.npmjs.com/package/react-native-button)

Ответ 5

Только изучение себя, но перенос в представление может позволить вам добавлять стили вокруг кнопки.

const Stack = StackNavigator({
  Home: {
    screen: HomeView,
    navigationOptions: {
      title: 'Home View'
    }
  },
  CoolView: {
    screen: CoolView,
    navigationOptions: ({navigation}) => ({
      title: 'Cool View',
      headerRight: (<View style={{marginRight: 16}}><Button
        title="Cool"
        onPress={() => alert('cool')}
      /></View>
    )
    })
  }
})

Ответ 6

Вместо использования кнопки. Вы можете использовать текст в реагировать на родной, а затем сделать в touchable

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

Ответ 7

Попробуйте этот

<TouchableOpacity onPress={() => this._onPressAppoimentButton()} style={styles.Btn}>
    <Button title="Order Online" style={styles.Btn} > </Button>
</TouchableOpacity>

Ответ 8

Похоже, вы используете библиотеку "native-base". Код мне подходит. Не могли бы вы также отправить стиль "Вид"?

Кроме того, в чем проблема? Вы вообще не можете видеть кнопки или вы не можете вызвать связанное действие здесь?

Ответ 9

Теперь мы можем использовать опору buttonStyle.
https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle

Ответ 10

Я знаю, что это некропубликация, но я нашел очень простой способ просто добавить margin-top и margin-bottom к самой кнопке, не создавая ничего другого.

Когда вы создаете стили, будь то встроенный или создавая объект для передачи, вы можете сделать это:

var buttonStyle = {
   marginTop: "1px",
   marginBottom: "1px"
}

Кажется, что добавление кавычек вокруг значения заставляет его работать. Я не знаю, так ли это, потому что это более поздняя версия React по сравнению с той, что была опубликована два года назад, но я знаю, что она работает сейчас.