reactjs - touchable - El estilo de botón React-Native no funciona

touchable react native

Question

Importar esto

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

Este es mi código de React Button, pero el estilo no funciona Hare ...

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

También me lo intenté con este código.

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

Pregunta de actualización:

También lo intenté por este camino ..

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

Estilo

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

Pero no puesto: captura de pantalla de mi teléfono: -

Answer 1

El botón Reaccionar nativo es muy limitado en lo que puedes hacer, mira; Button

No tiene una propuesta de estilo , y no establece el texto "web-way" como <Button>txt</Button> sino a través de la propiedad del título <Button title="txt" />

Si desea tener más control sobre la apariencia, debe usar uno de los componentes de TouchableXXXX ''como TouchableOpacity Son muy fáciles de usar :-)

Answer 2

En lugar de utilizar el botón. Puedes usar Text en reaccion nativo y luego hacer en touchable.

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

Answer 3

Los botones nativos de React son muy limitados en la opción que brindan. Puedes usar TouchableHighlight o TouchableOpacity al diseñar estos elementos y envolver tus botones de esta manera

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

También puede usar la biblioteca de reactivos para el botón personalizado. Una buena biblioteca es react-native-button ( https://www.npmjs.com/package/react-native-button )

Answer 4

Prueba este

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

Answer 5

Si no desea crear su propio componente de botón, una solución rápida y sucia es envolver el botón en una vista, lo que le permite al menos aplicar un estilo de diseño.

Por ejemplo, esto crearía una fila de botones:

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

Solo aprendiendo yo mismo, pero envolver en una Vista puede permitirle agregar estilos alrededor del botón.

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

Answer 7

Tuve un problema con el margen y el relleno con un Button . Agregué el botón dentro de un componente de View y aplico sus propiedades a la 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>