0
votes

Impossible d'importer le composant React Bootstrap dans l'application native React

Je souhaite utiliser React Bootstrap dans mon application mobile.

Mais quand j'écris :

import React, { Component } from 'react'
import {
    StyleSheet,
    Text,
    View,
} from 'react-native'
import Form from 'react-bootstrap/Form';

export default class Register extends Component {
    render() {
        return (
            <View style={styles.main_container}>
                <Form.Control type="email" placeholder="Enter email" />
                ...

J'ai cette erreur:

Violation invariante: la configuration de la vue est introuvable. Assurez-vous de commencer les noms des composants par une majuscule.

C'est le même problème pour le composant Form.Label (et je pense que pour tous les composants Réagir Bootstrap )

reactjs react-native react-bootstrap

1 commentaires

je suppose que ce n'est pas pris en charge

4 Réponses :

-1
votes

Vous devez essayer d'importer chaque composant d'amorçage comme ci-dessous, j'espère que cela vous aidera.

import {FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button} from 'react-bootstrap';

0 commentaires

1
votes

React Bootstrap ne fonctionne pas dans react native.vous pouvez utiliser les kits open source disponibles pour react native comme

etc

0 commentaires

0
votes

Vérifiez ces bibliothèques d'interface utilisateur pour le développement natif de React, React-bootstrap est dédié au développement Web Reactjs et non au développement mobile:

awesome-reactnative-ui

0 commentaires

0
votes

Des intentions similaires m'ont conduit à la création de ce package: https://github.com/andrenerd/react-native-bootstrap-styles

Il génère des styles de type Bootstrap, qui peuvent être utilisés de manière assez simple:

import BootstrapStyleSheet from 'react-native-bootstrap-styles';

const bootstrapStyleSheet = new BootstrapStyleSheet();
const {styles: s, constants: c} = bootstrapStyleSheet;

class Hello extends Component {
  render() {
    return (
      <View style={[s.container, s.h100, s.justifyContentCenter]}>
        <Text style={[s.text, s.textPrimary, s.myXs1]}>Hello world!</Text>
      </View>
    );
  }
}

0 commentaires