React-Native Button-Stil funktioniert nicht

74

Import_this

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

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

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

Auch ich wurde von diesem Code versucht

<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 auf diese Weise versucht ..

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

Stil

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

Aber keine Ausgabe: Screenshot meines Handys: - Screenshot meines Handys: -

JavaScript-Lerner
quelle
ButtonVerwenden Sie eine benutzerdefinierte Komponente oder eine Reaktionsknopfkomponente?
Sagar Khatri
1
Vielleicht reagieren `button
JavaScript Learner
1
Es hat kein styleEigentum. Bitte einmal überprüfen.
Sagar Khatri

Antworten:

108

Die Schaltfläche "Native reagieren" ist in Ihren Möglichkeiten sehr eingeschränkt. Taste

Es hat keine Stil-Requisite , und Sie legen den Text nicht wie im Web fest, <Button>txt</Button>sondern über die title-Eigenschaft<Button title="txt" />

Wenn Sie mehr Kontrolle über das Erscheinungsbild haben möchten, sollten Sie eine der TouchableXXXX-Komponenten wie TouchableOpacity verwenden. Sie sind wirklich einfach zu bedienen :-)

Plaul
quelle
11
Ein Arbeitsbeispiel mit TouchableOpacity wäre großartig.
Mayid
2
Hallo ... kannst du bitte erklären, warum Button keine Style-Requisiten hat?
Tunvir Rahman Tusher
Aus den Dokumenten : "Wenn diese Schaltfläche für Ihre App nicht richtig aussieht, können Sie mit TouchableOpacity oder TouchableNativeFeedback eine eigene Schaltfläche erstellen . Inspiration finden Sie im Quellcode dieser Schaltflächenkomponente . Oder werfen Sie einen Blick auf die große Auswahl von Button-Komponenten, die von der Community erstellt wurden . "
Andre Figueiredo
32

Ich hatte ein Problem mit dem Rand und dem Auffüllen mit einem Button. Ich habe Button in eine ViewKomponente eingefügt und Ihre Eigenschaften auf die angewendet 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>
Hitesh Sahu
quelle
In einigen Fällen funktioniert dies, z. B. wenn ein "Box-Schatten" hinzugefügt wird. Es ist dann ein Overkill, eine eigene Schaltfläche zu erstellen. Leider ist der Weg zu gehen, die eigene Schaltfläche zu erstellen, wenn man die Schaltfläche selbst gestalten möchte, wie z. B. Abmessungen, Polsterung, Texterscheinung usw.
Andre Figueiredo
11

Wenn Sie keine eigene Schaltflächenkomponente erstellen möchten, können Sie die Schaltfläche schnell und unkompliziert in eine Ansicht einbinden, sodass Sie zumindest das Layout-Styling anwenden können.

Dies würde beispielsweise eine Reihe von Schaltflächen erstellen:

<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>
Laurent
quelle
11

React Native-Schaltflächen sind in ihrer Option sehr eingeschränkt. Sie können TouchableHighlight oder TouchableOpacity verwenden, indem Sie dieses Element formatieren und Ihre Schaltflächen so damit umschließen

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

Sie können die React-Bibliothek auch für benutzerdefinierte Schaltflächen verwenden. Eine nette Bibliothek ist die React-Native-Schaltfläche ( https://www.npmjs.com/package/react-native-button ).

Kirti Chaturvedi
quelle
8

Anstatt die Schaltfläche zu verwenden. Sie können Text verwenden, um nativ zu reagieren und dann berührbar zu machen

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

Wenn Sie nur mich selbst lernen, aber in eine Ansicht einschließen, können Sie möglicherweise Stile um die Schaltfläche hinzufügen.

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>
    )
    })
  }
})
Philip Murphy
quelle
2

Probier diese

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

Ich weiß, dass dies ein Nekro-Posting ist, aber ich habe eine wirklich einfache Möglichkeit gefunden, den oberen Rand und den unteren Rand der Schaltfläche selbst hinzuzufügen, ohne etwas anderes erstellen zu müssen.

Wenn Sie die Stile inline oder durch Erstellen eines zu übergebenden Objekts erstellen, können Sie Folgendes tun:

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

Es scheint, dass das Hinzufügen der Anführungszeichen um den Wert funktioniert. Ich weiß nicht, ob dies daran liegt, dass es sich um eine spätere Version von React handelt, die vor zwei Jahren veröffentlicht wurde, aber ich weiß, dass sie jetzt funktioniert.

Michael Sheely
quelle