Comment définir la largeur de TouchableWithoutFeedback dépend du texte dans reac-native?

Question

J'utilise TouchableWithoutFeedback pour faire un bouton, mais la largeur du bouton est pleine largeur de l'écran.

Je me attends sur ce bouton:

Et ce sont mes styles:

btnDependText: { 
    backgroundColor: '#29b088', 
} 

Answer 1

Il est le plus susceptible de le faire avec le conteneur plutôt que le bouton lui-même, Découvrez cette collation par exemple: https://snack.expo.io/@jamie/so-answer.

balisage des composants

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <TouchableWithoutFeedback style={styles.button} onPress={() => console.warn('pressed!')}> 
      <View style={styles.buttonInner}> 
      <Text>Button</Text> 
      </View> 
     </TouchableWithoutFeedback> 
     </View> 
    ); 
    } 
} 

Styles

Si vous le style du récipient avec:

container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    paddingTop: Constants.statusBarHeight, 
    backgroundColor: '#ecf0f1', 
    }, 

Ensuite, vous devriez obtenir le look que vous êtes après. Toutefois, si vous supprimez le alignItems: center, vous verrez que le bouton passe en pleine largeur.

Espérons que ça aide!