{"expireTime":9007200837974445000,"key":"gatsby-plugin-mdx-entire-payload-9d7a6e435c13ab39f9295f71936f0fb7-/ilink-world","val":{"mdast":{"type":"root","children":[{"type":"import","value":"import DefaultLayout from \"D:/PROJET/iLinkApp/iLinkAppMobile/docs/node_modules/gatsby-theme-docz/src/base/Layout.js\"","position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":117,"offset":118},"indent":[]}},{"type":"export","default":true,"value":"export default DefaultLayout","position":{"start":{"line":5,"column":1,"offset":120},"end":{"line":5,"column":29,"offset":148},"indent":[]}},{"type":"import","value":"import { Playground, Props } from \"docz\";","position":{"start":{"line":8,"column":1,"offset":152},"end":{"line":8,"column":42,"offset":193},"indent":[]}},{"type":"thematicBreak","position":{"start":{"line":10,"column":1,"offset":197},"end":{"line":10,"column":4,"offset":200},"indent":[]}},{"type":"heading","depth":1,"children":[{"type":"text","value":"ConfigurationScreen","position":{"start":{"line":12,"column":3,"offset":206},"end":{"line":12,"column":22,"offset":225},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":204},"end":{"line":12,"column":22,"offset":225},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"La vue configuration fournit à l'utilisateur une interface permettant de configurer l'application. Dans notre cas\nles options disponibles pour la configuration de l'application sont uniquement le changement de langues.","position":{"start":{"line":14,"column":1,"offset":229},"end":{"line":15,"column":105,"offset":448},"indent":[1]}}],"position":{"start":{"line":14,"column":1,"offset":229},"end":{"line":15,"column":105,"offset":448},"indent":[1]}},{"type":"thematicBreak","position":{"start":{"line":17,"column":1,"offset":452},"end":{"line":17,"column":4,"offset":455},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"NB: A l'avenir, d'autres options devront être rajoutés à l'application afin d'offrir plus d'options de personnalisations.","position":{"start":{"line":19,"column":1,"offset":459},"end":{"line":19,"column":122,"offset":580},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":459},"end":{"line":19,"column":122,"offset":580},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"La bibliothèque react-native-i18n","position":{"start":{"line":21,"column":4,"offset":587},"end":{"line":21,"column":37,"offset":620},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":584},"end":{"line":21,"column":37,"offset":620},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️ Cette bibliothèque est obsolète","position":{"start":{"line":23,"column":1,"offset":624},"end":{"line":23,"column":35,"offset":658},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":624},"end":{"line":23,"column":35,"offset":658},"indent":[]}},{"type":"paragraph","children":[{"type":"emphasis","children":[{"type":"text","value":"Il est conseillé d'utiliser à la place la bibliothèque ","position":{"start":{"line":25,"column":2,"offset":663},"end":{"line":25,"column":57,"offset":718},"indent":[]}},{"type":"link","title":null,"url":"https://github.com/react-native-community/react-native-localize","children":[{"type":"text","value":"react-native-localize","position":{"start":{"line":25,"column":58,"offset":719},"end":{"line":25,"column":79,"offset":740},"indent":[]}}],"position":{"start":{"line":25,"column":57,"offset":718},"end":{"line":25,"column":145,"offset":806},"indent":[]}},{"type":"text","value":". On peut utiliser le package react-native-localize avec ","position":{"start":{"line":25,"column":145,"offset":806},"end":{"line":25,"column":202,"offset":863},"indent":[]}},{"type":"link","title":null,"url":"https://github.com/fnando/i18n-js","children":[{"type":"text","value":"I18n-js","position":{"start":{"line":25,"column":203,"offset":864},"end":{"line":25,"column":210,"offset":871},"indent":[]}}],"position":{"start":{"line":25,"column":202,"offset":863},"end":{"line":25,"column":246,"offset":907},"indent":[]}},{"type":"text","value":" (ou alors ","position":{"start":{"line":25,"column":246,"offset":907},"end":{"line":25,"column":257,"offset":918},"indent":[]}},{"type":"link","title":null,"url":"https://github.com/yahoo/react-intl","children":[{"type":"text","value":"react-intl","position":{"start":{"line":25,"column":258,"offset":919},"end":{"line":25,"column":268,"offset":929},"indent":[]}}],"position":{"start":{"line":25,"column":257,"offset":918},"end":{"line":25,"column":306,"offset":967},"indent":[]}},{"type":"text","value":", ","position":{"start":{"line":25,"column":306,"offset":967},"end":{"line":25,"column":308,"offset":969},"indent":[]}},{"type":"link","title":null,"url":"https://github.com/i18next/react-i18next","children":[{"type":"text","value":"react-i18next","position":{"start":{"line":25,"column":309,"offset":970},"end":{"line":25,"column":322,"offset":983},"indent":[]}}],"position":{"start":{"line":25,"column":308,"offset":969},"end":{"line":25,"column":365,"offset":1026},"indent":[]}},{"type":"text","value":", etc. Les choix sont multiples!)","position":{"start":{"line":25,"column":365,"offset":1026},"end":{"line":25,"column":398,"offset":1059},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":662},"end":{"line":25,"column":399,"offset":1060},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":662},"end":{"line":25,"column":399,"offset":1060},"indent":[]}},{"type":"jsx","value":"","position":{"start":{"line":27,"column":1,"offset":1064},"end":{"line":31,"column":3,"offset":1205},"indent":[1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"La fonction de démarrage initState","position":{"start":{"line":33,"column":4,"offset":1212},"end":{"line":33,"column":38,"offset":1246},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":1209},"end":{"line":33,"column":38,"offset":1246},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Au tout début, une fonction init permet d'initialiser les différents fichiers de langues préalablement créer.","position":{"start":{"line":35,"column":1,"offset":1250},"end":{"line":35,"column":110,"offset":1359},"indent":[]}}],"position":{"start":{"line":35,"column":1,"offset":1250},"end":{"line":35,"column":110,"offset":1359},"indent":[]}},{"type":"code","lang":"javascript","meta":null,"value":" initState(){\n let language=[];\n language.push({name:I18n.t('langue.english'),value:'en'});\n language.push({name:I18n.t('langue.french'),value:'fr'});\n return{\n languages:language\n }\n }","position":{"start":{"line":37,"column":1,"offset":1363},"end":{"line":46,"column":4,"offset":1627},"indent":[1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"A la suite un champ de texte listant les différentes langues disponibles, lui permettant ainsi de sélectionner la langue souhaitée.","position":{"start":{"line":48,"column":1,"offset":1631},"end":{"line":48,"column":132,"offset":1762},"indent":[]}}],"position":{"start":{"line":48,"column":1,"offset":1631},"end":{"line":48,"column":132,"offset":1762},"indent":[]}},{"type":"code","lang":"javascript","meta":null,"value":" {\n I18n.locale = value;\n this.setState({ language: value });\n this.configuration.setCurrentLangue(data[index]);\n IlinkEmitter.emit(\"userconnect\");\n }}\n valueExtractor={value => value.value}\n labelExtractor={value => value.name}\n/>","position":{"start":{"line":50,"column":1,"offset":1766},"end":{"line":63,"column":4,"offset":2150},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"export","value":"export const _frontmatter = {}","position":{"start":{"line":66,"column":1,"offset":2154},"end":{"line":66,"column":31,"offset":2184},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":66,"column":31,"offset":2184}}},"scopeImports":[],"scopeIdentifiers":[],"rawMDXOutput":"/* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\nimport DefaultLayout from \"D:/PROJET/iLinkApp/iLinkAppMobile/docs/node_modules/gatsby-theme-docz/src/base/Layout.js\"\nimport { Playground, Props } from \"docz\";\nexport const _frontmatter = {};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\")\n return
\n};\n\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = DefaultLayout\nexport default function MDXContent({\n components,\n ...props\n}) {\n return \n\n\n\n
\n

{`ConfigurationScreen`}

\n

{`La vue configuration fournit à l'utilisateur une interface permettant de configurer l'application. Dans notre cas\nles options disponibles pour la configuration de l'application sont uniquement le changement de langues.`}

\n
\n

{`NB: A l'avenir, d'autres options devront être rajoutés à l'application afin d'offrir plus d'options de personnalisations.`}

\n

{`La bibliothèque react-native-i18n`}

\n

{`⚠️ Cette bibliothèque est obsolète`}

\n

{`Il est conseillé d'utiliser à la place la bibliothèque `}{`react-native-localize`}{`. On peut utiliser le package react-native-localize avec `}{`I18n-js`}{` (ou alors `}{`react-intl`}{`, `}{`react-i18next`}{`, etc. Les choix sont multiples!)`}

\n \n

{`La fonction de démarrage initState`}

\n

{`Au tout début, une fonction init permet d'initialiser les différents fichiers de langues préalablement créer.`}

\n 
{`    initState(){\n        let language=[];\n        language.push({name:I18n.t('langue.english'),value:'en'});\n        language.push({name:I18n.t('langue.french'),value:'fr'});\n        return{\n            languages:language\n        }\n    }\n`}
\n

{`A la suite un champ de texte listant les différentes langues disponibles, lui permettant ainsi de sélectionner la langue souhaitée.`}

\n 
{` {\n    I18n.locale = value;\n    this.setState({ language: value });\n    this.configuration.setCurrentLangue(data[index]);\n    IlinkEmitter.emit(\"userconnect\");\n  }}\n  valueExtractor={value => value.value}\n  labelExtractor={value => value.name}\n/>\n`}
\n\n ;\n}\n\n;\nMDXContent.isMDXComponent = true;"}}