web-dev-qa-db-fra.com

Création de composants 'Div' et 'Span' dans React Native

J'ai vu dans diverses instances que l'utilisation de "View" dans React Native était quasiment équivalente à l'utilisation d'un "div" dans React.

Bien que je comprenne le raisonnement du composant View (qui souhaite prendre en charge toutes les options 'div'?), Il semble qu'un composant capable de gérer la plupart des attributs 'div' et 'span' raisonnables puisse être créé de sorte que Réagir natif n'est pas une corvée fastidieuse.

Est-ce que quelqu'un a de tels composants qu'il a testés et qu'il peut partager? Toutes les questions relatives à la prise en charge des styles, à la cartographie des événements et à la cartographie des enfants semblent être répétitives pour quasiment tous les utilisateurs de React Native.

Quelque chose comme

class Div extends Component {  //or Class Span extends Component

  static propTypes = {
    style : PropTypes.obj
    onClick : PropTypes.func   // ...
  }

  render (){
    return (
      <View>
      {
        /* whatever is needed to pass everything through  ... */
      }
      </View>
  }
}
javascripthtmlreactjsdomreact-native
5
Lost In Space

Je pense que vous manquez le point de React Native. Il est censé avoir des composants qui correspondent aux composants d'interface utilisateur natifs de la plate-forme mobile. Ce n'est pas censé être quelque chose qui prend HTML et le convertit en quelque chose qui ressemble à une application mobile. C'est pourquoi on l'appelle "Natif" - parce qu'il utilise l'interface utilisateur de la plate-forme. Si vous souhaitez utiliser des éléments HTML courants pour créer une application mobile, pourquoi ne vous contentez-vous pas de cadres tels que Cordova/Ionic, etc.?

React ressemble maintenant à un idiome qui vous permet de créer une interface utilisateur, quel que soit le périphérique. React Native prend simplement cet "idiot" de React et sait comment le restituer sur l'écran du mobile. Il n’existe donc pas de "portage de React to React Native".

Si vous souhaitez expérimenter, vous pouvez créer un composant Div personnalisé et un composant Span personnalisé, à votre choix. Vous pouvez simplement transmettre les accessoires de ce composant à une vue ou à un texte. Mais je pense que ce serait redondant. Habituellement, vous créez vos propres composants et les coulisses utilisent View, Text et TextInput, etc., tous les composants de base de React Native.

4
nbkhope

Bien que je sois à 100% d’accord avec la réponse de @nbkhope, je constate que la réponse recherchée par @LostInSpace est un remplacement immédiat d’un code HTML <div>

Cela semble être une telle chose: https://www.npmjs.com/package/react-native-div

2
Kris Randall