1 line
12 KiB
JSON
1 line
12 KiB
JSON
{"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":"<img\n src=\"https://cdn0.iconfinder.com/data/icons/material-design-ii-glyph/614/3010_-_Translate-512.png\"\n width=\"100\"\n align=\"left\"\n/>","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":"<Dropdown\n label=\"Changer la langue\"\n data={this.state.languages}\n onChangeText={(value, index, data) => {\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 <div {...props}/>\n};\n\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = DefaultLayout\nexport default function MDXContent({\n components,\n ...props\n}) {\n return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n\n <hr></hr>\n <h1 {...{\n \"id\": \"configurationscreen\"\n }}>{`ConfigurationScreen`}</h1>\n <p>{`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.`}</p>\n <hr></hr>\n <p>{`NB: A l'avenir, d'autres options devront être rajoutés à l'application afin d'offrir plus d'options de personnalisations.`}</p>\n <h2 {...{\n \"id\": \"la-bibliothèque-react-native-i18n\"\n }}>{`La bibliothèque react-native-i18n`}</h2>\n <p>{`⚠️ Cette bibliothèque est obsolète`}</p>\n <p><em parentName=\"p\">{`Il est conseillé d'utiliser à la place la bibliothèque `}<a parentName=\"em\" {...{\n \"href\": \"https://github.com/react-native-community/react-native-localize\"\n }}>{`react-native-localize`}</a>{`. On peut utiliser le package react-native-localize avec `}<a parentName=\"em\" {...{\n \"href\": \"https://github.com/fnando/i18n-js\"\n }}>{`I18n-js`}</a>{` (ou alors `}<a parentName=\"em\" {...{\n \"href\": \"https://github.com/yahoo/react-intl\"\n }}>{`react-intl`}</a>{`, `}<a parentName=\"em\" {...{\n \"href\": \"https://github.com/i18next/react-i18next\"\n }}>{`react-i18next`}</a>{`, etc. Les choix sont multiples!)`}</em></p>\n <img src=\"https://cdn0.iconfinder.com/data/icons/material-design-ii-glyph/614/3010_-_Translate-512.png\" width=\"100\" align=\"left\" />\n <h2 {...{\n \"id\": \"la-fonction-de-démarrage-initstate\"\n }}>{`La fonction de démarrage initState`}</h2>\n <p>{`Au tout début, une fonction init permet d'initialiser les différents fichiers de langues préalablement créer.`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-javascript\"\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`}</code></pre>\n <p>{`A la suite un champ de texte listant les différentes langues disponibles, lui permettant ainsi de sélectionner la langue souhaitée.`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-javascript\"\n }}>{`<Dropdown\n label=\"Changer la langue\"\n data={this.state.languages}\n onChangeText={(value, index, data) => {\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`}</code></pre>\n\n </MDXLayout>;\n}\n\n;\nMDXContent.isMDXComponent = true;"}} |