Всем привет, сегодня я научу вас, как создать компонентный ввод, чтобы вы могли повторно использовать его с помощью Styled Components для React Native.
Вводимый текст будет похож на приведенный ниже, он будет очень простым, но вы можете увеличить его позже!
Проект будет использовать expo для простоты запуска проекта, но тот же учебник применим к React Native CLI, не стесняйтесь использовать то, что наиболее полезно в вашем контексте.
Что потребуется, чтобы продолжить обучение?
- React Native CLI / Выставка
- Терминал
- Установите библиотеку стилизованных компонентов
- нпм или пряжа
Давай начнем!
- Запустите свой проект, используя свой терминал.
expo init ProjectName
or
npx react-native init ProjectName
2. Войдите в папку вашего проекта и откройте ее в своем любимом редакторе.
cd ProjectName
yarn add styled-components
yarn start
3. Теперь давайте настроим структуру папок в соответствии с широко используемым шаблоном. Создайте папку с именем src и сделайте внутри нее структуру, как показано ниже.
📦 src ┣ 📂 components ┃ ┗ 📂 Input ┃ ┃ ┣ 📜 index.jsx ┃ ┃ ┗ 📜 styles.js ┗ 📂 screens ┃ ┗ 📂 Home ┃ ┃ ┣ 📜 index.js ┃ ┃ ┗ 📜 styles.js
4. Оставьте файл App.js, как в приведенном ниже коде.
Примечание: С этого момента в кодах я буду использовать изображения, ведь если это туториал, то вы должны повторять код, чтобы лучше зафиксировать его в голове. Один из лучших способов научиться программированию – повторять и практиковаться.
4. Давайте сделаем краткий стиль на домашней странице только для отображения ввода. Но позже вы можете настроить его по своему усмотрению. Давайте отредактируем index.js.
Теперь давайте применим базовый стиль. Откройте файл styles.js и поместите следующий код
Откройте файл styles.js и поместите следующий код
