React-Native Button-Stil funktioniert nicht

Import_this

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

Diese meine Reagieren Schaltfläche code, Aber Stil nicht funktioniert Hase ...

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

Wurde ich auch versuchen, 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:

Wurde ich auch versuchen, auf Diese Weise..

<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 Nicht heraus gesetzt:
Screenshot von meinem Telefon:-

InformationsquelleAutor der Frage JavaScript Learner | 2017-04-24

36

Den Reagieren Nativen Taste ist sehr beschränkt in dem, was Sie tun können, sehen; Button

Es nicht Stil propund Sie don ' T set text "web-Art", wie <Button>txt</Button> aber über die title-Eigenschaft <Button title="txt" />

Wenn Sie wollen, haben mehr Kontrolle über das Aussehen sollten Sie verwenden Sie eine der TouchableXXXX' Komponenten wie TouchableOpacity
Sie sind wirklich einfach zu bedienen 🙂

InformationsquelleAutor der Antwort Plaul

Wenn Sie nicht wollen, erstellen Sie Ihre eigenen button-Komponente, eine quick-and-dirty Lösung ist, wickeln Sie die Taste in einer Ansicht, die Ihnen erlaubt, zu mindestens layout anwenden styling.

Beispielsweise würde eine Reihe von Schaltflächen:

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

InformationsquelleAutor der Antwort this.lau_

Hatte ich ein Problem mit margin und padding mit einem Button. Ich fügte hinzu, Taste innen eine View Komponente und Ihre Eigenschaften die 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>

InformationsquelleAutor der Antwort Hitesh Sahu

Reagieren Native-Tasten sind nur sehr eingeschränkt in der option, die Sie bieten.Sie können TouchableHighlight oder TouchableOpacity durch diese styling-element und Verpackung Ihrer Tasten mit es so

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

Können Sie auch reagieren-Bibliothek für kundenspezifische Taste .Eine schöne Bibliothek reagieren-native-Taste (https://www.npmjs.com/package/react-native-button)

InformationsquelleAutor der Antwort Kirti Chaturvedi

0

Scheint, dass Sie mithilfe von " native-Basis-Bibliothek. Der code scheint in Ordnung zu mir. Kannst du bitte senden Sie die Ansicht Stil?

Auch, was ist hier das problem? Sind Sie nicht in der Lage, um zu sehen, die Tasten überhaupt nicht oder Sie sind nicht in der Lage, um die gebundenen Aktion hier?

InformationsquelleAutor der Antwort atitpatel

Nur das lernen selbst, aber das einwickeln in ein View kann Ihnen erlauben, fügen Sie Stile hinzu, um den Knopf.

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

InformationsquelleAutor der Antwort Philip Murphy

-1

Können Sie versuchen, geben Sie den link-Beschreibung hier

import { Button } from 'react-native-elements';

<Button
  title="LOADING BUTTON"
  loading
  loadingProps={{ size: "large", color: "rgba(111, 202, 186, 1)" }}
  titleStyle={{ fontWeight: "700" }}
  buttonStyle={{
    backgroundColor: "rgba(92, 99,216, 1)",
    width: 300,
    height: 45,
    borderColor: "transparent",
    borderWidth: 0,
    borderRadius: 5
  }}
  containerStyle={{ marginTop: 20 }}
/>

InformationsquelleAutor der Antwort Alessander França

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.