Stile per bottone

Grazie allo stile (simile al CSS) si può facilmente posizionare un’area di testo ovunque nella schermata di React Native, ma posizionare un bottone è meno intuitivo.

Per posizionare un’area di testo, si potrebbe usare questa semplice applicazione (la riga 11 è quella corretta, mentre la riga 14 non funziona)

// file App.js

import React from 'react';
import {Text, View, Button} from 'react-native';
import {styles} from './theme.js';

const App = () => {
  return(
    <View style={styles.container}>
      <Text style={styles.box1}>RN</Text>
      <View style={styles.button}>
        <Button
          title="titolo"
          // style={styles.button} // errore
        />
      </View>
    </View>
  );
};

export default App;

Come si vede alla riga 11, anche se è piuttosto insolito, il <Button> è avvolto dentro una <View>

Questa è la soluzione che permette di spostare e ridimensionare un bottone.

La riga 14 tenta di applicare lo stesso stile anche sul bottone, ma si deve eliminare, in quanto non funziona proprio, questo perche Button deriva da Pressable, un componente che non possiede gli attributi necessari alla posizione.

Questo è il file sorgente per lo stile

// file theme.js

import React from 'react';
import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  box1:{
    position: 'absolute',
    top: 40,
    left: 40,
    width: 100,
    height: 100,
    backgroundColor: '#FF0000',
  },
  button:{
    position: 'absolute',
    top:80,
    left:100,
  },
});

export {styles};

Se si desidera applicare uno stile al testo contenuto nel bottone (di solito si chiama proprietà title) si può usare un componente generico simile a <Button> di nome <Pressable> e poi inserirvi un testo Text

    <Pressable onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </Pressable>