react-crud-mobile 1.0.430 → 1.0.431
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react-crud-mobile.cjs.development.js +1 -0
- package/dist/react-crud-mobile.cjs.development.js.map +1 -1
- package/dist/react-crud-mobile.cjs.production.min.js +1 -1
- package/dist/react-crud-mobile.cjs.production.min.js.map +1 -1
- package/dist/react-crud-mobile.esm.js +1 -0
- package/dist/react-crud-mobile.esm.js.map +1 -1
- package/package.json +71 -71
- package/src/elements/UI.tsx +65 -65
- package/src/elements/UIChildren.tsx +127 -127
- package/src/elements/UIComplete.tsx +14 -14
- package/src/elements/UIElement.tsx +518 -516
- package/src/elements/UITag.tsx +13 -13
- package/src/elements/charts/ElChart.tsx +10 -10
- package/src/elements/core/UIAutoComplete.tsx +17 -17
- package/src/elements/core/UIButton.tsx +73 -73
- package/src/elements/core/UIIcon.tsx +8 -8
- package/src/elements/core/UIInclude.tsx +40 -40
- package/src/elements/core/UIInput.tsx +69 -69
- package/src/elements/core/UILink.tsx +17 -17
- package/src/elements/core/UIList.tsx +135 -135
- package/src/elements/core/UIListItem.tsx +32 -32
- package/src/elements/core/UIListRow.tsx +32 -32
- package/src/elements/core/UIModal.tsx +139 -139
- package/src/elements/core/UIOption.tsx +17 -17
- package/src/elements/core/UIQuantity.tsx +97 -97
- package/src/elements/core/UIRadio.tsx +17 -17
- package/src/elements/core/UISelect.tsx +122 -122
- package/src/elements/core/UISwitch.tsx +26 -26
- package/src/elements/core/UIToggle.tsx +102 -102
- package/src/elements/index.ts +1 -1
- package/src/elements/tabs/ElTabs.tsx +178 -178
- package/src/index.ts +1 -1
package/src/elements/UITag.tsx
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { Utils } from "react-crud-utils";
|
|
3
|
-
|
|
4
|
-
interface UITagType {
|
|
5
|
-
name: string;
|
|
6
|
-
[otherOptions: string]: unknown;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export default function UITag(props: UITagType) {
|
|
10
|
-
let Aux = Utils.nvl(props.name, "span");
|
|
11
|
-
|
|
12
|
-
return <Aux {...props} />;
|
|
13
|
-
}
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { Utils } from "react-crud-utils";
|
|
3
|
+
|
|
4
|
+
interface UITagType {
|
|
5
|
+
name: string;
|
|
6
|
+
[otherOptions: string]: unknown;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export default function UITag(props: UITagType) {
|
|
10
|
+
let Aux = Utils.nvl(props.name, "span");
|
|
11
|
+
|
|
12
|
+
return <Aux {...props} />;
|
|
13
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ChildType, Scope, Utils } from "react-crud-utils";
|
|
3
|
-
|
|
4
|
-
export default function ElChart(props: ChildType) {
|
|
5
|
-
let scope: Scope = props.scope;
|
|
6
|
-
let items: any = scope.getItems();
|
|
7
|
-
let columns = Utils.asList(scope.original.columns);
|
|
8
|
-
|
|
9
|
-
return <div className="ui-chart-data"></div>;
|
|
10
|
-
}
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ChildType, Scope, Utils } from "react-crud-utils";
|
|
3
|
+
|
|
4
|
+
export default function ElChart(props: ChildType) {
|
|
5
|
+
let scope: Scope = props.scope;
|
|
6
|
+
let items: any = scope.getItems();
|
|
7
|
+
let columns = Utils.asList(scope.original.columns);
|
|
8
|
+
|
|
9
|
+
return <div className="ui-chart-data"></div>;
|
|
10
|
+
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
|
|
2
|
-
|
|
3
|
-
export default function UIAutoComplete(props: any) {
|
|
4
|
-
const handlePress = () => {
|
|
5
|
-
Linking.openURL('https://reactnative.dev/');
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
return (
|
|
9
|
-
<TouchableOpacity onPress={handlePress}>
|
|
10
|
-
<Text style={styles.link}>Clique aqui para acessar o React Native</Text>
|
|
11
|
-
</TouchableOpacity>
|
|
12
|
-
);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const styles = {
|
|
16
|
-
link: {},
|
|
17
|
-
};
|
|
1
|
+
import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
|
|
2
|
+
|
|
3
|
+
export default function UIAutoComplete(props: any) {
|
|
4
|
+
const handlePress = () => {
|
|
5
|
+
Linking.openURL('https://reactnative.dev/');
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<TouchableOpacity onPress={handlePress}>
|
|
10
|
+
<Text style={styles.link}>Clique aqui para acessar o React Native</Text>
|
|
11
|
+
</TouchableOpacity>
|
|
12
|
+
);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const styles = {
|
|
16
|
+
link: {},
|
|
17
|
+
};
|
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
import { Ionicons } from '@expo/vector-icons';
|
|
2
|
-
import { ChildType } from 'react-crud-utils';
|
|
3
|
-
import { Text, TouchableHighlight, View } from 'react-native';
|
|
4
|
-
|
|
5
|
-
export default function UIButton(props: ChildType) {
|
|
6
|
-
let scope = props.scope;
|
|
7
|
-
let element = scope.original;
|
|
8
|
-
|
|
9
|
-
let color = element.color;
|
|
10
|
-
let label = element.label;
|
|
11
|
-
let icon = element.icon;
|
|
12
|
-
|
|
13
|
-
if (!color) color = 'primary';
|
|
14
|
-
|
|
15
|
-
const styles: any = {
|
|
16
|
-
buttonLabel: {
|
|
17
|
-
color: '#ffffff',
|
|
18
|
-
fontWeight: '500',
|
|
19
|
-
fontSize: 16,
|
|
20
|
-
},
|
|
21
|
-
buttonInner: {
|
|
22
|
-
flexDirection: 'row',
|
|
23
|
-
alignItems: 'center',
|
|
24
|
-
justifyContent: 'center',
|
|
25
|
-
height: 44,
|
|
26
|
-
},
|
|
27
|
-
buttonIcon: {
|
|
28
|
-
color: '#fff',
|
|
29
|
-
fontSize: 18,
|
|
30
|
-
paddingRight: 10,
|
|
31
|
-
},
|
|
32
|
-
button: {
|
|
33
|
-
alignItems: 'center',
|
|
34
|
-
minWidth: 200,
|
|
35
|
-
margin: 5,
|
|
36
|
-
padding: 0,
|
|
37
|
-
paddingHorizontal: 20,
|
|
38
|
-
textAlign: 'center',
|
|
39
|
-
verticalAling: 'middle',
|
|
40
|
-
borderRadius: 24,
|
|
41
|
-
backgroundColor: color,
|
|
42
|
-
color: '#ffffff',
|
|
43
|
-
justifyContent: 'center',
|
|
44
|
-
flex: 1,
|
|
45
|
-
},
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
const onClick = (e: any) => {
|
|
49
|
-
scope.call('click', {});
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
const style = (part: string, extra?: any) => {
|
|
53
|
-
let s = { ...styles[part], ...extra };
|
|
54
|
-
return scope.getStyle(part, s);
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
return (
|
|
58
|
-
<TouchableHighlight
|
|
59
|
-
underlayColor={'transparent'}
|
|
60
|
-
onPress={onClick}
|
|
61
|
-
style={style('button')}
|
|
62
|
-
>
|
|
63
|
-
<View style={style('buttonInner')}>
|
|
64
|
-
{icon && (
|
|
65
|
-
<>
|
|
66
|
-
<Ionicons size={30} style={style('buttonIcon')} name={icon} />
|
|
67
|
-
</>
|
|
68
|
-
)}
|
|
69
|
-
<Text style={style('buttonLabel')}>{label}</Text>
|
|
70
|
-
</View>
|
|
71
|
-
</TouchableHighlight>
|
|
72
|
-
);
|
|
73
|
-
}
|
|
1
|
+
import { Ionicons } from '@expo/vector-icons';
|
|
2
|
+
import { ChildType } from 'react-crud-utils';
|
|
3
|
+
import { Text, TouchableHighlight, View } from 'react-native';
|
|
4
|
+
|
|
5
|
+
export default function UIButton(props: ChildType) {
|
|
6
|
+
let scope = props.scope;
|
|
7
|
+
let element = scope.original;
|
|
8
|
+
|
|
9
|
+
let color = element.color;
|
|
10
|
+
let label = element.label;
|
|
11
|
+
let icon = element.icon;
|
|
12
|
+
|
|
13
|
+
if (!color) color = 'primary';
|
|
14
|
+
|
|
15
|
+
const styles: any = {
|
|
16
|
+
buttonLabel: {
|
|
17
|
+
color: '#ffffff',
|
|
18
|
+
fontWeight: '500',
|
|
19
|
+
fontSize: 16,
|
|
20
|
+
},
|
|
21
|
+
buttonInner: {
|
|
22
|
+
flexDirection: 'row',
|
|
23
|
+
alignItems: 'center',
|
|
24
|
+
justifyContent: 'center',
|
|
25
|
+
height: 44,
|
|
26
|
+
},
|
|
27
|
+
buttonIcon: {
|
|
28
|
+
color: '#fff',
|
|
29
|
+
fontSize: 18,
|
|
30
|
+
paddingRight: 10,
|
|
31
|
+
},
|
|
32
|
+
button: {
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
minWidth: 200,
|
|
35
|
+
margin: 5,
|
|
36
|
+
padding: 0,
|
|
37
|
+
paddingHorizontal: 20,
|
|
38
|
+
textAlign: 'center',
|
|
39
|
+
verticalAling: 'middle',
|
|
40
|
+
borderRadius: 24,
|
|
41
|
+
backgroundColor: color,
|
|
42
|
+
color: '#ffffff',
|
|
43
|
+
justifyContent: 'center',
|
|
44
|
+
flex: 1,
|
|
45
|
+
},
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const onClick = (e: any) => {
|
|
49
|
+
scope.call('click', {});
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const style = (part: string, extra?: any) => {
|
|
53
|
+
let s = { ...styles[part], ...extra };
|
|
54
|
+
return scope.getStyle(part, s);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<TouchableHighlight
|
|
59
|
+
underlayColor={'transparent'}
|
|
60
|
+
onPress={onClick}
|
|
61
|
+
style={style('button')}
|
|
62
|
+
>
|
|
63
|
+
<View style={style('buttonInner')}>
|
|
64
|
+
{icon && (
|
|
65
|
+
<>
|
|
66
|
+
<Ionicons size={30} style={style('buttonIcon')} name={icon} />
|
|
67
|
+
</>
|
|
68
|
+
)}
|
|
69
|
+
<Text style={style('buttonLabel')}>{label}</Text>
|
|
70
|
+
</View>
|
|
71
|
+
</TouchableHighlight>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Ionicons } from '@expo/vector-icons';
|
|
2
|
-
import { ChildType } from 'react-crud-utils';
|
|
3
|
-
|
|
4
|
-
export default function UIIcon({ scope }: ChildType) {
|
|
5
|
-
let name = scope.getValue();
|
|
6
|
-
|
|
7
|
-
return <Ionicons name={name} style={scope.getStyle('icon')} />;
|
|
8
|
-
}
|
|
1
|
+
import { Ionicons } from '@expo/vector-icons';
|
|
2
|
+
import { ChildType } from 'react-crud-utils';
|
|
3
|
+
|
|
4
|
+
export default function UIIcon({ scope }: ChildType) {
|
|
5
|
+
let name = scope.getValue();
|
|
6
|
+
|
|
7
|
+
return <Ionicons name={name} style={scope.getStyle('icon')} />;
|
|
8
|
+
}
|
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import UIChildren from '../UIChildren';
|
|
2
|
-
import { ComponentUtils, DefineType, Utils } from 'react-crud-utils';
|
|
3
|
-
|
|
4
|
-
export default function UIInclude(props: DefineType) {
|
|
5
|
-
if (props.rendered === false) {
|
|
6
|
-
return <></>;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
let includes = ComponentUtils.getDefine(props, props.name, props.position);
|
|
10
|
-
|
|
11
|
-
if (Utils.isEmpty(includes)) {
|
|
12
|
-
includes = props.default;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
if (!Utils.isEmpty(includes)) {
|
|
16
|
-
let Aux = (tagProp: any) => {
|
|
17
|
-
let Tag: any = props.tag;
|
|
18
|
-
|
|
19
|
-
if (!Utils.isEmpty(Tag)) {
|
|
20
|
-
return <Tag {...tagProp}>{tagProp.children}</Tag>;
|
|
21
|
-
}
|
|
22
|
-
return <>{tagProp.children}</>;
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<Aux {...props.tagProps}>
|
|
27
|
-
<UIChildren
|
|
28
|
-
transient
|
|
29
|
-
{...props}
|
|
30
|
-
scope={props.scope}
|
|
31
|
-
crud={props.crud}
|
|
32
|
-
part={props.name}
|
|
33
|
-
>
|
|
34
|
-
{includes}
|
|
35
|
-
</UIChildren>
|
|
36
|
-
</Aux>
|
|
37
|
-
);
|
|
38
|
-
}
|
|
39
|
-
return <>{includes}</>;
|
|
40
|
-
}
|
|
1
|
+
import UIChildren from '../UIChildren';
|
|
2
|
+
import { ComponentUtils, DefineType, Utils } from 'react-crud-utils';
|
|
3
|
+
|
|
4
|
+
export default function UIInclude(props: DefineType) {
|
|
5
|
+
if (props.rendered === false) {
|
|
6
|
+
return <></>;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
let includes = ComponentUtils.getDefine(props, props.name, props.position);
|
|
10
|
+
|
|
11
|
+
if (Utils.isEmpty(includes)) {
|
|
12
|
+
includes = props.default;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
if (!Utils.isEmpty(includes)) {
|
|
16
|
+
let Aux = (tagProp: any) => {
|
|
17
|
+
let Tag: any = props.tag;
|
|
18
|
+
|
|
19
|
+
if (!Utils.isEmpty(Tag)) {
|
|
20
|
+
return <Tag {...tagProp}>{tagProp.children}</Tag>;
|
|
21
|
+
}
|
|
22
|
+
return <>{tagProp.children}</>;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<Aux {...props.tagProps}>
|
|
27
|
+
<UIChildren
|
|
28
|
+
transient
|
|
29
|
+
{...props}
|
|
30
|
+
scope={props.scope}
|
|
31
|
+
crud={props.crud}
|
|
32
|
+
part={props.name}
|
|
33
|
+
>
|
|
34
|
+
{includes}
|
|
35
|
+
</UIChildren>
|
|
36
|
+
</Aux>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
return <>{includes}</>;
|
|
40
|
+
}
|
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import { ChildType, Utils } from 'react-crud-utils';
|
|
3
|
-
import { StyleSheet, TextInput, View } from 'react-native';
|
|
4
|
-
import { Ionicons } from '@expo/vector-icons';
|
|
5
|
-
|
|
6
|
-
export default function UIInput(props: ChildType) {
|
|
7
|
-
let scope = props.scope;
|
|
8
|
-
let initial = Utils.nvl(scope.getValue(), '');
|
|
9
|
-
|
|
10
|
-
let label = scope.getLabel();
|
|
11
|
-
let placeholder = scope.getPart('placeholder', null, label);
|
|
12
|
-
let el = scope.original;
|
|
13
|
-
|
|
14
|
-
const [value, setValue] = useState(initial);
|
|
15
|
-
|
|
16
|
-
let onChange = v => {
|
|
17
|
-
scope.changeValue(v);
|
|
18
|
-
|
|
19
|
-
setValue(v);
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const style = (part: string, extra?: any) => {
|
|
23
|
-
return { ...scope.getStyle(part, styles[part]), ...extra };
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<>
|
|
28
|
-
{scope.getPart('left')}
|
|
29
|
-
<TextInput
|
|
30
|
-
style={style('input')}
|
|
31
|
-
onChangeText={onChange}
|
|
32
|
-
value={value}
|
|
33
|
-
placeholder={placeholder}
|
|
34
|
-
/>
|
|
35
|
-
{el.icon && (
|
|
36
|
-
<Ionicons
|
|
37
|
-
name={el.icon}
|
|
38
|
-
size={scope.attr('iconSize', 20)}
|
|
39
|
-
color={scope.attr('iconColor', '#888')}
|
|
40
|
-
/>
|
|
41
|
-
)}
|
|
42
|
-
{scope.getPart('right')}
|
|
43
|
-
</>
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
const styles = StyleSheet.create({
|
|
48
|
-
base: {
|
|
49
|
-
flexDirection: 'row',
|
|
50
|
-
alignItems: 'center',
|
|
51
|
-
borderWidth: 1,
|
|
52
|
-
borderColor: 'borderColor',
|
|
53
|
-
borderRadius: 20,
|
|
54
|
-
paddingHorizontal: 10,
|
|
55
|
-
paddingVertical: 5,
|
|
56
|
-
padding: 10,
|
|
57
|
-
paddingLeft: 5,
|
|
58
|
-
paddingRight: 10,
|
|
59
|
-
},
|
|
60
|
-
icon: {
|
|
61
|
-
marginRight: 10, // Espaço entre ícone e input
|
|
62
|
-
},
|
|
63
|
-
input: {
|
|
64
|
-
marginHorizontal: 0,
|
|
65
|
-
marginVertical: 0,
|
|
66
|
-
height: 40,
|
|
67
|
-
flex: 1, // Para o input ocupar o espaço restante
|
|
68
|
-
},
|
|
69
|
-
});
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import { ChildType, Utils } from 'react-crud-utils';
|
|
3
|
+
import { StyleSheet, TextInput, View } from 'react-native';
|
|
4
|
+
import { Ionicons } from '@expo/vector-icons';
|
|
5
|
+
|
|
6
|
+
export default function UIInput(props: ChildType) {
|
|
7
|
+
let scope = props.scope;
|
|
8
|
+
let initial = Utils.nvl(scope.getValue(), '');
|
|
9
|
+
|
|
10
|
+
let label = scope.getLabel();
|
|
11
|
+
let placeholder = scope.getPart('placeholder', null, label);
|
|
12
|
+
let el = scope.original;
|
|
13
|
+
|
|
14
|
+
const [value, setValue] = useState(initial);
|
|
15
|
+
|
|
16
|
+
let onChange = v => {
|
|
17
|
+
scope.changeValue(v);
|
|
18
|
+
|
|
19
|
+
setValue(v);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const style = (part: string, extra?: any) => {
|
|
23
|
+
return { ...scope.getStyle(part, styles[part]), ...extra };
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<>
|
|
28
|
+
{scope.getPart('left')}
|
|
29
|
+
<TextInput
|
|
30
|
+
style={style('input')}
|
|
31
|
+
onChangeText={onChange}
|
|
32
|
+
value={value}
|
|
33
|
+
placeholder={placeholder}
|
|
34
|
+
/>
|
|
35
|
+
{el.icon && (
|
|
36
|
+
<Ionicons
|
|
37
|
+
name={el.icon}
|
|
38
|
+
size={scope.attr('iconSize', 20)}
|
|
39
|
+
color={scope.attr('iconColor', '#888')}
|
|
40
|
+
/>
|
|
41
|
+
)}
|
|
42
|
+
{scope.getPart('right')}
|
|
43
|
+
</>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const styles = StyleSheet.create({
|
|
48
|
+
base: {
|
|
49
|
+
flexDirection: 'row',
|
|
50
|
+
alignItems: 'center',
|
|
51
|
+
borderWidth: 1,
|
|
52
|
+
borderColor: 'borderColor',
|
|
53
|
+
borderRadius: 20,
|
|
54
|
+
paddingHorizontal: 10,
|
|
55
|
+
paddingVertical: 5,
|
|
56
|
+
padding: 10,
|
|
57
|
+
paddingLeft: 5,
|
|
58
|
+
paddingRight: 10,
|
|
59
|
+
},
|
|
60
|
+
icon: {
|
|
61
|
+
marginRight: 10, // Espaço entre ícone e input
|
|
62
|
+
},
|
|
63
|
+
input: {
|
|
64
|
+
marginHorizontal: 0,
|
|
65
|
+
marginVertical: 0,
|
|
66
|
+
height: 40,
|
|
67
|
+
flex: 1, // Para o input ocupar o espaço restante
|
|
68
|
+
},
|
|
69
|
+
});
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
|
|
2
|
-
|
|
3
|
-
export default function UILink(props: any) {
|
|
4
|
-
const handlePress = () => {
|
|
5
|
-
Linking.openURL('https://reactnative.dev/');
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
return (
|
|
9
|
-
<TouchableOpacity onPress={handlePress}>
|
|
10
|
-
<Text style={styles.link}>Clique aqui para acessar o React Native</Text>
|
|
11
|
-
</TouchableOpacity>
|
|
12
|
-
);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const styles = {
|
|
16
|
-
link: {},
|
|
17
|
-
};
|
|
1
|
+
import { Text, TouchableOpacity, Linking, StyleSheet } from 'react-native';
|
|
2
|
+
|
|
3
|
+
export default function UILink(props: any) {
|
|
4
|
+
const handlePress = () => {
|
|
5
|
+
Linking.openURL('https://reactnative.dev/');
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<TouchableOpacity onPress={handlePress}>
|
|
10
|
+
<Text style={styles.link}>Clique aqui para acessar o React Native</Text>
|
|
11
|
+
</TouchableOpacity>
|
|
12
|
+
);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const styles = {
|
|
16
|
+
link: {},
|
|
17
|
+
};
|