React-Native Button-Stil funktioniert nicht

Import_this

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

Dies ist mein React Button Code Aber Stil nicht funktioniert Hare ...

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

Auch ich habe versucht, durch diesen Code

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

Auch ich wurde von This way..

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

But No out put: Screenshot von meinem Telefon:-

Brandon Søren Culley
Bearbeitete Frage 18. August 2018 в 1:50
Programmierung
react-native reactjs jsx react-native-button
24. April 2017 в 10:08
4 Aufrufe

Der React Native Button ist in seinen Möglichkeiten sehr eingeschränkt, siehe: Button

Er hat keine style prop, und man setzt den Text nicht auf dem "Web-Weg" wie txt, sondern über die title Eigenschaft ``

Wenn Sie mehr Kontrolle über das Aussehen haben wollen, sollten Sie eine der TouchableXXXX' Komponenten wie TouchableOpacity verwenden. Sie sind wirklich einfach zu benutzen :-)

Kommentare (3)

Wenn Sie keine eigene Schaltflächenkomponente erstellen möchten, besteht eine schnelle und schmutzige Lösung darin, die Schaltfläche in eine Ansicht zu verpacken, die Ihnen zumindest die Anwendung von Layout-Styling ermöglicht.

Dies würde zum Beispiel eine Reihe von Schaltflächen erzeugen:



         {}}>


         {}}>
Kommentare (0)

Ich lerne nur, aber das Einbinden in eine Ansicht kann es Ihnen ermöglichen, Stile um die Schaltfläche herum hinzuzufügen.

const Stack = StackNavigator({
  Home: {
    screen: HomeView,
    navigationOptions: {
      title: 'Home View'
    }
  },
  CoolView: {
    screen: CoolView,
    navigationOptions: ({navigation}) => ({
      title: 'Cool View',
      headerRight: ( alert('cool')}
      />
    )
    })
  }
})
Brandon Søren Culley
Bearbeitete Antwort 16. August 2018 в 4:08
Kommentare (0)