|
Xulosa
Ushbu individual loyiha qilish davomida mobil ilovalar yaratish uchun react native ni qanday darajada effektiv va tezlik bilan ishlashga yordam berishini o'rgandim.Ilova yordamida bemorlarga qay darajada yordam bera olishni va jadvalni bemorlar uchun muhim ekanligini o'rgandim.Shuningdek chet davlatda shunga o'xshash ilovalarni ham o'rganib chiqdim.Bunga bo'lgan talab kuchayib boryatganini aniqladim.React native ni cross plotform ekanligini hisobga olib kamchilik va avfzallik tomonlari o'rganildi.
Adabiyatlor:
1.https://en.wikipedia.org/wiki/Table_(information) - Jadvallar haqida
Tashrif buyurilgan sana: 2020-01-12
2.https://en.wikipedia.org/wiki/Pill_reminder-Dori eslatish haqida
Tashrif buyurilgan sana: 2020-01-12
3.https://www.netguru.com/what-is-react-native-React native nima
Tashrif buyurilgan sana: 2020-01-12
4.https://en.wikipedia.org/wiki/Redux_(JavaScript_library)-Redux haqida
Tashrif buyurilgan sana: 2020-01-12
5.https://redux.js.org/recipes/implementing-undo-history-Redux algoritmlari
Tashrif buyurilgan sana: 2020-01-12
6.https://redux-algorithms.herokuapp.com/ - Redux algoritmlari
Tashrif buyurilgan sana: 2020-01-12
https://www.reactnative.guide/3-react-native-internals/3.1-react-native-internals.html - React native haqida
Ilova
Mobil ilovani kodlari ko'p bo'lgani uchun asosiylarini ulashmoqchiman
Reduxni eng muhim qismi ushbu koddan iboratdir.
const name = "contact";
const types = {
ADD_MEMBER: ADD_MEMBER_${name},
CHANGE_SEX: CHANGE_SEX_${name},
FULL_CHECK: FULL_CHECK_${name},
ADD_TIME: ADD_TIME_${name},
REMOVE_TIME: REMOVE_TIME_${name},
ADD_TABLE: ADD_TABLE_${name},
}
const initialState = {
list: [
{
id:1,
text:"Ixtiyor Sharobiddinov",
sex:"Erkak",
age:"21"
},
],
table:[
{
id1:1,
name:'Alisher',
time:'212121',
pill:'Trimol',
day1:true,
day2:true,
day3:true,
day4:true,
day5:true,
day6:true,
day7:true,
date1:new Date(1598051730000),
date2:new Date(1598051730000),
date3:new Date(1598051730000),
},
],
loading: false,
first1:true,
Id:1,
Id1:1,
hozir:"yaxshi ixtiyor",
sex:false,
age:0,
text:"",
full:false,
addId:1,
};
export default (state = initialState, action) => {
switch (action.type) {
case types.ADD_MEMBER:{
return {
...state,
full:!state.full,
Id: ++state.Id,
list: [...state.list,{
id:state.Id,
text:action.payload.text,
age:action.payload.age,
sex:action.payload.sex
}],
}
}
case types.CHANGE_SEX:{
return {
...state,
sex:!state.sex
}
}
case types.ADD_TIME:{
return {
...state,
addId:state.addId===3?3:++state.addId
}
}
case types.REMOVE_TIME:{
return {
...state,
addId:state.addId===1?1:--state.addId
}
}
case types.ADD_TABLE:{
return {
...state,
Id1: ++state.Id1,
table: state.addId===1?
[...state.table,
{
id1:state.Id1,
name:action.payload.name,
time:action.payload.time,
pill:action.payload.pill,
day1:action.payload.day1,
day2:action.payload.day2,
day3:action.payload.day3,
day4:action.payload.day4,
day5:action.payload.day5,
day6:action.payload.day6,
day7:action.payload.day7,
date1:action.payload.date1,
date2:null,
date3:null,
}]:state.addId===2?[...state.table,
{
id1:state.Id1,
name:action.payload.name,
time:action.payload.time,
pill:action.payload.pill,
day1:action.payload.day1,
day2:action.payload.day2,
day3:action.payload.day3,
day4:action.payload.day4,
day5:action.payload.day5,
day6:action.payload.day6,
day7:action.payload.day7,
date1:action.payload.date1,
date2:action.payload.date2,
date3:null,
}]:[...state.table,
{
id1:state.Id1,
name:action.payload.name,
time:action.payload.time,
pill:action.payload.pill,
day1:action.payload.day1,
day2:action.payload.day2,
day3:action.payload.day3,
day4:action.payload.day4,
day5:action.payload.day5,
day6:action.payload.day6,
day7:action.payload.day7,
date1:action.payload.date1,
date2:action.payload.date2,
date3:action.payload.date3,
}]
}
}
default:
return state;
}
};
export const AddMember =(message) => dispatch => {
if (message.name!=='' && message.sex!=='' && message.age!== ''){
dispatch({ type: types.ADD_MEMBER ,payload:message});
}
}
export const ChangeGender = () => dispatch => {
dispatch({ type: types.CHANGE_SEX});
}
export const Save = (message) => dispatch => {
if (message.age === 0 || message.age === null || message.text ===null || message.text ===""){
alert("To'liq to'ldiring");
}
else{
dispatch({ type: types.ADD_MEMBER,payload:message});
}
}
export const AddTime = () => dispatch => {
dispatch({ type: types.ADD_TIME});
}
export const RemoveTime = () => dispatch => {
dispatch({ type: types.REMOVE_TIME});
}
export const AddTable = (message) => dispatch => {
if (message.name === "" || message.name === null || message.pill ===null || message.pill ===""){
alert("To'liq to'ldiring");
}
else{
dispatch({ type: types.ADD_TABLE,payload:message});
}
}
Yuqorodagi kod Redux ni asosiy mantiqiy qismi bo'lib asosiy algoritmlarni g ko'pi shu yerda joylashgan.
Bundan pastda esa app ni barcha sahifalar keladigan qismi joylashgan bu yerda u boshqaruvchi sifatida o'z ichiga oladi va sahifalarni yo'naltiradi.
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {Fontisto,Entypo} from '@expo/vector-icons';
import PatientScreen from "./assets/Patient/patient";
import PatientAddScreen from "./assets/Patient/patientAdd";
import store from "./assets/component/store";
import {Provider} from "react-redux";
import {createStackNavigator} from "@react-navigation/stack";
import TableAddScreen from "./assets/Table/TableAdd";
import TableScreen from "./assets/Table/Table";
import PillScreen from "./assets/Pill/pill";
const Stack = createStackNavigator();
function Patient() {
return (
);
}
function Profile() {
return (
);
}
function Notifications() {
return (
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
initialRouteName="Feed"
tabBarOptions={{
activeTintColor: '#e91e63',
}}
>
name="Feed"
component={Patient}
options={{
tabBarLabel: 'Bemor',
tabBarIcon: ({ color, size }) => (
),
}}
/>
name="Notifications"
component={Notifications}
options={{
tabBarLabel: 'Jadval',
tabBarIcon: ({ color, size }) => (
),
}}
/>
name="Profile"
component={Profile}
options={{
tabBarLabel: 'Dori',
tabBarIcon: ({ color, size }) => (
),
}}
/>
);
}
export default function App() {
return (
);
}
Do'stlaringiz bilan baham: |
