همانطور که می دانید در مقاله پیشین توضیح دادیم که ReactXP چیست. حال قصد داریم در این مقاله تمام کامپوننت ها و اجزای آن را به شما عزیزان معرفی کنیم. بنابراین با مجموعه ABLY همراه باشید.

بسم الله الرحمن الرحیم

همانطور که می دانید در مقاله پیشین توضیح دادیم که ReactXP چیست. حال قصد داریم در این مقاله تمام کامپوننت ها و اجزای آن را به شما عزیزان معرفی کنیم. بنابراین با مجموعه ABLY همراه باشید.

آموزش برنامه نویسی | ReactXP چیست؟ (بخش سوم)

کامپوننت ها در ReactXP

عناصر UI در React اجزا یا همان component (کامپوننت) نامیده می شوند. هنگامی که یک جزء تعریف شده است، می توان آن را در داخل اجزای دیگر گنجانیده تا یک رابط کاربری کامل ایجاد کند.

هر کامپوننتی دارای یک شیء State و Props است. <P, S> از اجزای اصلی قابل استفاده در React هستند. منظور از P، Props و منظور از S، State است که آن ها را در ادامه بررسی خواهیم کرد.

• یکی از مهم ترین متدها در React، متد render است.

کد زیر یک مثال ساده است که یک متن را رندر و اجرا می کند.

  render() {
        return <div>Hello World</div>;
    }
}

توجه داشته باشید که این کامپوننت برچسب "div" را صادر می کند که تنها در محیط مرورگر معتبر است. برای ایجاد این در یک مولفه ReactXP، به جای "div" آن را با یک برچسب "RX.Text" جایگزین کنید.

  render() {
        return <rx.text>Hello World</rx.text>;
    }
}

Props:

شما برای نمایش داده ها بصورت پویا می توانید از Props استفاده کنید. Props می تواند مقادیر ساده، شیء یا حتی توابع باشد.

متد تعریف شده در این اجزا “this.props” است که با این متد می توانید به اطلاعات خود دسترسی پیدا کنید.

 userName?: string; // Question mark indicates prop is optional
}

class HelloWorld extends RX.Component<HelloWorldProps, void> {
    render() {
        return (
            <RX.Text>
                { 'Hello ' + (this.props.userName || 'World') }
            </RX.Text>
        );
    }
}

State:

State با استفاده از متد setState فراخوانی می شود. setState باعث به روز رسانی UI می شود.

// Fields within a state object are usually defined as optional
    // (hence the question mark below) because calls to setState 
    // typically update only a subset of the fields.
    isStopped?: boolean;
}

const _styles = {
    redButton: RX.Styles.createViewStyle({
        width: 30,
        height: 30,
        borderRadius: 15,
        backgroundColor: 'red'
    }),
    greenButton: RX.Styles.createViewStyle({
        width: 30,
        height: 30,
        borderRadius: 15,
        backgroundColor: 'green'
    })
};

class StopLight extends RX.Component<void, StopLightState> {
    getInitialState(): StopLightState {
        return { isStopped: true };
    }

    render() {
        // Choose the appropriate style for the current state.
        var buttonStyle = this.state.isStopped ? 
            _styles.redButton : _styles.greenButton;

        return (
            <RX.Button style={ buttonStyle } 
                onPress={ this._onToggleState } />
        );
    }

    private _onToggleState = (e: RX.MouseEvent) => {
        e.stopPropagation();

        // Flip the value of "isStopped" and re-render.
        this.setState({ isStopped: !this.state.isStopped });
    }
}

اجزای دیگر در React

ActivityIndicator

• این کامپوننت یک کنترلر "spinner" متحرک را نشان می دهد که به کاربر می گوید که چه عملیاتی را باید انجام دهد.

Props:

color: color;

// Number of ms to wait before displaying
deferTime: number = 0;

// Size of indicator (exact sizes are platform-specific)
size: 'large' | 'medium' | 'small' | 'tiny';

Methods:

• متدی ندارد

Button

Props:

// Alternate text to display if the image cannot be loaded
// or by screen readers
accessibilityLabel: boolean = false;

// Hide the component from screen readers?
accessibilityHidden: boolean = false;

// Traits used to hint screen readers, etc.
accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;

// Region for accessibility mechanisms
accessibilityLiveRegion: AccessibilityLiveRegion =
    undefined; // Android and web only

// Id of an expandable element revealed by the button. Describes a relation between button and element to screen reader.
ariaControls: string = undefined; // Web only

// Specifies a unique id for an HTML element
id: string = undefined; // Web only

// Expose the element and/or its children as accessible to Screen readers
importantForAccessibility?: ImportantForAccessibility = ImportantForAccessibility.yes;

// Delay in ms before onLongPress is called
delayLongPress: number = 1000;

// If disabled, touch and mouse input events are ignored
disabled: boolean = false;

// Called when VoiceOver is on and the user double tapped to
// activate a control
onAccessibilityTapIOS: (e: SyntheticEvent) => void; // iOS Only

// Called when the user has pressed and held for a specified duration
onLongPress: (e: SyntheticEvent) => void;

// Called when the mouse cursor enters or leaves the view bounds
onHoverStart: (e: SyntheticEvent) => void;
onHoverEnd: (e: SyntheticEvent) => void;

// Called when the touch or mouse button is released within the
// bounds of the view and the press has not been canceled
onPress: (e: SyntheticEvent) => void;

// Called when touch is initiated or mouse button is pressed
onPressIn: (e: SyntheticEvent) => void;

// Called when touch or the mouse button is released or the
// user's finger or mouse cursor is no longer over the view
onPressOut: (e: SyntheticEvent) => void;

// Rasterize contents using offscreen bitmap (perf optimization)
shouldRasterizeIOS: boolean = false; // iOS only

// See below for supported styles
style: ButtonStyleRuleSet | ButtonStyleRuleSet[] = [];

// Keyboard tab order
tabIndex: number = undefined;

// Text for a tooltip
title: string = undefined;

// Visual touchfeedback properties
// Disable default opacity animation on touch of buttons
disableTouchOpacityAnimation: boolean = false;  // iOS and Android only

// Opacity value the button should animate to on button touch
activeOpacity: number = undefined; // iOS and Android only

// Background color that will be visible on button touch
underlayColor: string = undefined; // iOS and Android only

Methods:

focus(): void;

GestureView

• GestureView رفتارهای معمول مبتنی بر ماوس را شامل دوبار کلیک کردن و ورودی چرخش پیمایش می کند.

Props:

onPinchZoom: (gestureState: MultiTouchGestureState) => void = undefined;
onRotate: (gestureState: MultiTouchGestureState) => void = undefined;

// Gestures and attributes that apply only to mouse inputs
onScrollWheel: (gestureState: ScrollWheelGestureState) => void = undefined;
mouseOverCursor: GestureMouseCursor = undefined;

// Gestures and attributes that apply to either touch or mouse inputs
onPan: (gestureState: PanGestureState) => void = undefined;
onPanVertical: (gestureState: PanGestureState) => void = undefined;
onPanHorizontal: (gestureState: PanGestureState) => void = undefined;
onTap: (gestureState: TapGestureState) => void = undefined;
onDoubleTap: (gestureState: TapGestureState) => void = undefined;

// We can set vertical or horizontal as preferred
preferredPan: PreferredPanGesture = undefined; // Horizontal or vertical

// How many pixels (in either horizontal or vertical direction) until
// pan is recognized? Default is 10. Can be any value > 0.
panPixelThreshold: number = undefined;

// Something else wants to become responder. Should this view
// release the responder? Setting true allows release.
releaseOnRequest: boolean = false;

// Alternate text for screen readers.
accessibilityLabel: string = undefined;

// Traits used to hint screen readers, etc.
accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;

// Expose the element and/or its children as accessible to Screen readers
importantForAccessibility?: ImportantForAccessibility = ImportantForAccessibility.Yes;

Methods:

focus(): void;

Image

• این کامپوننت یک تصویر را نشان می دهد که می تواند از یک منبع محلی یا از شبکه باشد. این از فرمت های JPEG، GIF و PNG پشتیبانی می کند.

Props:

// Alternate text to display if the image cannot be loaded
// or by screen readers
accessibilityLabel: string = undefined;

// HTTP headers to include when fetching the URL.
headers: { [headerName: string]: string } = undefined;

// Called when an error occurs that prevents the image from loading
onError: (e: SyntheticEvent) => void;

// Called when the image successfully loads
onLoad: (e: SyntheticEvent) => void;

// Android-specific resize property
resizeMethod: 'auto' | 'resize' | 'scale' = 'auto'; // Android only

// Determines how to resize the image if its natural size
// does not match the size of the container
resizeMode: 'stretch' | 'contain' | 'cover' | 'auto' | 'repeat' = 'stretch';

// Rasterize contents using offscreen bitmap (perf optimization)
shouldRasterizeIOS: boolean = false; // iOS only

// URL to image
source: string = undefined;

// See below for supported styles
style: ImageStyleRuleSet | ImageStyleRuleSet[] = [];

// Tooltip for image
title: string = undefined;

Methods:

getNativeHeight(): number;
getNativeWidth(): number;

Link

• این کامپوننت برای نمایش یک لینک است که آن را در وب، به یک تگ <a> تبدیل می کند.

Props:

allowFontScaling: boolean = true; // Android and iOS only

// Should the scale multiplier be capped when allowFontScaling is set to true?
// Possible values include the following:
// null/undefined (default) - inheret from parent/global default
// 0 - no max
// >= 1 - sets the maxContentSizeMultiplier of this node to this value
// Note: Older versions of React Native don’t support this interface. 
maxContentSizeMultiplier: number = null; // Android and iOS only

// For non-zero values, truncates with ellipsis if necessary
numberOfLines: number = 0;

// Called when the mouse cursor enters or leaves the view bounds
onHoverStart: (e: SyntheticEvent) => void = undefined;
onHoverEnd: (e: SyntheticEvent) => void = undefined;

// Event called when the touch or mouse button is released 
// within the bounds of the view and the press has not been canceled
onPress: (e: SyntheticEvent, url: string) => void = undefined;

// Event called when a long touch or mouse (> 1000ms) button is released 
// within the bounds of the view and the press has not been canceled
onLongPress: (e: SyntheticEvent, url:string) => void = undefined;

// Can the link be included in a text selection?
selectable: boolean = false;

// Text for a tooltip
title: string = undefined;

// URL to follow for hyperlink
url: string;

// See below for supported styles
style: LinkStyleRuleSet | LinkStyleRuleSet[] = [];

Methods:

• متدی ندارد

Picker

• این کامپوننت یک کنترل را نشان می دهد که به کاربر اجازه می دهد لیستی از موارد را انتخاب کند.

Types:

 label: string;
    value: string;
}

Props:

items: PickerPropsItem[] = [];

// Initially-selected item
selectedValue: string;

// Invoked when the selected value changes
onValueChange: (itemValue: string, itemPosition: number) => void;

style: PickerStyleRuleSet | PickerStyleRuleSet[] = [];

// Android only.
// 'dialog': Show a modal dialog. This is the default.
// 'dropdown': Shows a dropdown anchored to the picker view
mode: 'dialog' | 'dropdown';

Methods:

• متدی ندارد

مثال:

 {
        label: 'Cool',
        value: 'cool'
    },
    {
        label: 'Super',
        value: 'super'
    },
    {
        label: 'Great',
        value: 'great'
    }
];

class MyComponent extends RX.Component<null, { selectedValue: string }> {
    constructor() {
        super();

        this.state = {
            selectedValue: 'cool'
        }
    }

    render(): JSX.Element {
        return (
            <RX.Text numberOfLines={ 1 }>
                <RX.Text> { 'How are you feeling? ' } </RX.Text>
                <RX.Picker
                    items={ pickerItems }
                    selectedValue={ this.state.selectedValue }
                    onValueChange={ this._onValueChange }
                />
            </RX.Text>
        );
    }

    private _onValueChange = (itemValue: string, itemIndex: number) => {
        this.setState({ selectedValue: itemValue });
    }
}

ScrollView

• از این کامپوننت برای محدود کردن ابعاد ScrollView، ارتفاع / عرض استفاده می شود.

Props:

// Should scroll bar bounce when user hits the bounds?
bounces: boolean = true; // iOS only

// Does it support scrolling in the horizontal and/or vertical directions?
horizontal: boolean = false;
vertical: boolean = true;

// If the contents are smaller than the view port, should they be justified 
// to the top of the view (i.e. flex-start) or the end (flex-end)?
justifyEnd: boolean = false;

// When the user scrolls the view, how should the on-screen keyboard react?
keyboardDismissMode: 'none' | 'interactive' | 'on-drag'; // Native only

// Should the on-screen keyboard remain visible when the user taps
// the scroll view?
keyboardShouldPersistTaps: boolean = false; // Native only

// Maximum scale factor
maximumZoomScale: number = 1.0;

// Minimum scale factor
minimumZoomScale: number = 1.0;

// Invoked when the contents of the scroll view change
onContentSizeChange: (width: number, height: number) => void = undefined;

// Invoked when view dimensions or position changes
onLayout: (e: ViewOnLayoutEvent) => void = undefined;

// Called when the scroll position changes
onScroll: (newScrollTop: number, newScrollLeft: number) => void = undefined;

// Called when the user starts or stops scrolling (touch-based systems only)
onScrollBeginDrag: () => void = undefined;
onScrollEndDrag: () => void = undefined;

// Android only property to control overScroll mode
overScrollMode?: 'always' | 'always-if-content-scrolls' | 'never';

// Snap to page boundaries?
pagingEnabled: boolean = false; // iOS only
snapToInterval: number = undefined; // iOS only

// Is scrolling enabled?
scrollEnabled: boolean = true;

// how often (in milliseconds) between scroll events?
scrollEventThrottle: number = undefined;

// If true, this scroll bar scrolls to the top when the user
// taps on the status bar.
scrollsToTop: boolean = false; // iOS only

// Should the indicator be displayed?
showsHorizontalScrollIndicator: boolean = [same as horizontal];
showsVerticalScrollIndicator: boolean = [same as horizontal];

// See below for supported styles
style: ViewStyleRuleSet | ViewStyleRuleSet[] = [];

focus(): void;

// Sets the absolute top or left position (measured in pixels) of the
// viewport within the scroll view. Optionally animates from the current
// position.
setScrollLeft(scrollLeft: number, animate: boolean): void;
setScrollTop(scrollTop: number, animate: boolean): void;

// Adds a value to the current top or left position (measured in pixels) of the
// viewport within the scroll view. Optionally animates from the current
// position.
addToScrollLeft(deltaLeft: number, animate: boolean): void;
addToScrollTop(deltaTop: number, animate: boolean): void;

Text

• این کامپوننت متن اصلی را نمایش می دهد.

Props:

// Alternate text to display if the image cannot be loaded
// or by screen readers
accessibilityLabel: string = undefined;

// Hide the component from screen readers?
accessibilityHidden: boolean = false;

// Traits used to hint screen readers, etc.
accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;

// Region for accessibility mechanisms
accessibilityLiveRegion: AccessibilityLiveRegion =
    undefined; // Android and web only

// Should fonts be scaled according to system setting?
allowFontScaling: boolean = true; // Android and iOS only

// Specifies a unique id for an HTML element
id: string = undefined; // Web only

// Should the scale multiplier be capped when allowFontScaling is set to true?
// Possible values include the following:
// null/undefined (default) - inheret from parent/global default
// 0 - no max
// >= 1 - sets the maxContentSizeMultiplier of this node to this value
// Note: Older versions of React Native don’t support this interface. 
maxContentSizeMultiplier: number = null; // Android and iOS only

// For non-zero values, truncates with ellipsis if necessary
numberOfLines: number = 0;

// Is the text selectable (affects mouse pointer and copy command)
selectable: boolean = false;

// Mouse & Touch Events
onPress?: (e: SyntheticEvent) => void = undefined;
onContextMenu?: (e: SyntheticEvent) => void = undefined;

// See below for supported styles
style: TextStyleRuleSet | TextStyleRuleSet[] = [];

// Keyboard tab order
tabIndex: number = undefined;

Methods:

focus(): void;

مثال 1:

 <RX.Text style={ _styles.titleText }>
            { this.props.title }
        </RX.Text>
        <RX.Text style={ _styles.bodyText }>
            { this.props.body }
        </RX.Text>
    </RX.Text>

مثال 2:

 redBox: RX.Styles.createViewStyle({
            width: 10,
            height: 10,
            backgroundColor: 'red'
        })
    }

    <RX.Text style={ _styles.defaultText } numberOfLines={ 1 }>
        <RX.Text> { 'Red box ' } </RX.Text>
        <RX.View style={ _styles.redBox } />
        <RX.Text> { ' inlined view example' } </RX.Text>
    </RX.Text>

TextInput

• این کامپوننت قابلیت های ورودی اولیه متن را فراهم می کند.

Props:

// Should fonts be scaled according to system setting?
allowFontScaling: boolean = true; // Android and iOS only

// Auto-capitalization mode
autoCapitalize: 'none' | 'sentences' | 'words' | 'characters';

// Should auto-correction be applied to contents?
autoCorrect: boolean = true;

// Should focus be applied to text input on componentDidMount?
autoFocus: boolean = false;

// Should focus be lost after submitting?
blurOnSubmit: boolean = false;

// Initial value that will change when the user starts typing
defaultValue: string = undefined;

// Disable full screen editor mode?
disableFullscreenUI: boolean = false; // Android-specific

// Can text be edited by the user?
editable: boolean = true;

// iOS-only prop for controlling the keyboard appearance
keyboardAppearance: 'default' | 'light' | 'dark';

// On-screen keyboard type to display
keyboardType: 'default' | 'numeric' | 'email-address' | 'number-pad';

// Should the scale multiplier be capped when allowFontScaling is
// set to true? Possible values include the following:
// null/undefined (default) - inheret from parent/global default
// 0 - no max
// >= 1 - sets the maxContentSizeMultiplier of this node to this value
// Note: Older versions of React Native don’t support this interface. 
maxContentSizeMultiplier: number = null; // Android and iOS only

// Maximum character count
maxLength: number = undefined;

// Should the control support multiple lines of text?
multiline: boolean = false;

// Called when the control loses focus
onBlur: () => void = undefined;

// Called when the text value changes
onChangeText: (newValue: string) => void = undefined;

// Called when the control obtains focus
onFocus: () => void = undefined;

// Called on a key event
onKeyPress: (e: KeyboardEvent) => void = undefined;

// Called when text is pasted into the control
onPaste: (e: ClipboardEvent) => void = undefined;

// Called when the selection scrolls due to overflow
onScroll: (newScrollTop: number, newScrollLeft: number) => void = undefined;

// Called when the selection range or insertion point location changes
onSelectionChange: (start: number, end: number) => void = undefined;

// Called when the text input submit button is pressed; invalid if 
// multiline is true
onSubmitEditing: () => void = undefined;

// Placeholder text to dislpay when input is empty
placeholder: string = undefined;

// Color of placeholder text
placeholderTextColor: color = '#ccc';

// iOS and android prop for controlling return key type
returnKeyType: 'done' | 'go' | 'next' | 'search' | 'send';

// Obscure the text input (for passwords)?
secureTextEntry: boolean = false;

// Should spell checking be applied to contents?
spellCheck: boolean = [value of autoCorrect];

// See below for supported styles
style: TextInputStyleRuleSet | TextInputStyleRuleSet[] = [];

// Alignment of text within the input box.
textAlign: 'auto' | 'left' | 'right' | 'center' | 'justify';


// If defined, the control value is forced to match this value;
// if undefined, control value can be modified by the user
value: string = undefined;

Methods:

// Forces the control to give up focus
blur(): void;

// Gives the control focus. For mobile, use setAccessibilityFocus()
// for setting screen reader focus
focus(): void;

// Gives the control accessibility-only focus
// E.g. screen reader focus is needed, but popping up of native
// keyboard is undesirable 
setAccessibilityFocus(): void;

// Does control currently have focus?
isFocused(): boolean;

// Extends selection to include all contents
selectAll(): void;

// Selects a range of text
selectRange(start: number, end: number): void;

// Returns the current selection range
getSelectionRange(): { start: number, end: number };

// Sets the current value
setValue(value: string): void;

این مطالب را نیز بخوانید:

آموزش json web token

آموزش auto complete در asp.net mvc

استفاده از تگ iframe در asp.net mvc

View

• این کامپوننت یک container عمومی برای اجزای دیگر است.

Props:

// Alternate text for screen readers.
// If not defined, title prop is used.
accessibilityLabel: string = undefined;

// Hide the component from screen readers?
accessibilityHidden: boolean = false;

// Traits used to hint screen readers, etc.
accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;

// Region for accessibility mechanisms
accessibilityLiveRegion: AccessibilityLiveRegion =
    undefined; // Android and web only

// Expose the element and/or its children as accessible to Screen readers
importantForAccessibility?: ImportantForAccessibility = Auto;

// Animation of children
//   - Every child must have a `key`.
//   - String refs aren't supported on children. Only callback refs are.
animateChildEnter: boolean = false;
animateChildLeave: boolean = false;
animateChildMove: boolean = false;

// Id of an element that describes the view for screenreader.
ariaLabelledBy: string = undefined; // Web only

// Block touches for this component and all of its children
blockPointerEvents: boolean = false; // iOS and Android only

// Specifies a unique id for an HTML element
id: string = undefined; // Web only

// Ignore clicks and other mouse events, allowing children or
// components behind to receive them
ignorePointerEvents: boolean = false; // web only

// When the keyboard navigation is happening, restrict the focusable
// elements within this view. Useful for popups and modals, you
// might want to prevent the focus from going outside of the popup or
// modal. The views with restrictFocusWithin are stacked and the last
// mounted view is a winner. This means if you, for example, have
// restricted the focus within some modal, and you have a popup (which
// also desires for a restricted focus) inside this modal, the popup
// will get the restriction, but when dismissed, the restriction will
// be restored for the modal. See also the companion method
// setFocusRestricted() below.
// WARNING: For the sake of performance, this property is readonly and
// changing it during the View life cycle will produce an error.
restrictFocusWithin: boolean = false; // web only

// When the keyboard navigation is happening, do not focus on this view
// and on all focusable elements inside this view. See also the companion
// method setFocusLimited() below.
// Useful for the list items, allows to skip the consecutive focusing on
// one list item (and item's internal focusable elements) after another
// using the Tab key and implement the switching between the items using
// the arrow keys (or using some other behaviour).
// WARNING: For the sake of performance, this property is readonly and
// changing it during the View life cycle will produce an error.
limitFocusWithin: boolean = false; // web only

// Additional invisible DOM elements will be added inside the view
// to track the size changes that are performed behind our back by
// the browser's layout engine faster (ViewBase checks for the layout
// updates once a second and sometimes it's not fast enough)
importantForLayout: boolean = false; // web only

// Mouse-specific Events
onDragEnter: (e: DragEvent) => void = undefined;
onDragOver: (e: DragEvent) => void = undefined;
onDragLeave: (e: DragEvent) => void = undefined;
onDrop: (e: DragEvent) => void = undefined;
onMouseEnter: (e: MouseEvent) => void = undefined;
onMouseLeave: (e: MouseEvent) => void = undefined;
onMouseMove: (e: MouseEvent) => void = undefined;
onMouseOver: (e: MouseEvent) => void = undefined;

// Mouse & Touch Events
onContextMenu: (e: React.SyntheticEvent) => void;
onPress: (e: SyntheticEvent) => void = undefined;

// Touch-specific Events
onLongPress: (e: SyntheticEvent) => void = undefined;
onMoveShouldSetResponder: (e: React.SyntheticEvent) => boolean =
    undefined;
onMoveShouldSetResponderCapture: (e: React.SyntheticEvent) => boolean =
    undefined;
onResponderGrant: (e: React.SyntheticEvent) => void = undefined;
onResponderReject: (e: React.SyntheticEvent) => void = undefined;
onResponderRelease: (e: React.SyntheticEvent) => void = undefined;
onResponderStart: (e: React.TouchEvent) => void = undefined;
onResponderMove: (e: React.TouchEvent) => void = undefined;
onResponderEnd: (e: React.TouchEvent) => void = undefined;
onResponderTerminate: (e: React.SyntheticEvent) => void = undefined;
onResponderTerminationRequest: (e: React.SyntheticEvent) => boolean =
    undefined;
onStartShouldSetResponder: (e: React.SyntheticEvent) => boolean =
    undefined;
onStartShouldSetResponderCapture: (e: React.SyntheticEvent) => boolean =
    undefined;

// Other Events
onLayout: (e: ViewOnLayoutEvent) => void = undefined;

// Rasterize contents using offscreen bitmap (perf optimization)
shouldRasterizeIOS: boolean = false; // iOS only

// Keyboard tab order
tabIndex: number = undefined;

// Text for a tooltip
title: string = undefined;

// See below for supported styles
style: ViewStyleRuleSet | ViewStyleRuleSet[] = [];

// Should use hardware or software rendering?
viewLayerTypeAndroid: 'none' | 'software' | 'hardware'; // Android only property

// Visual touchfeedback properties
// Disable default opacity animation on touch on views that have onPress handlers
disableTouchOpacityAnimation: boolean = false;  // iOS and Android only

// Opacity value the button should animate to, on touch on views that have onPress handlers.
activeOpacity: number = undefined; // iOS and Android only

// Background color that will be visible on touch on views that have onPress handlers.
underlayColor: string = undefined; // ßiOS and Android only

Methods:

// Sets the accessibility focus to the component.
focus(): void;

// The focus does not go outside the view with restrictFocusWithin by default,
// setFocusRestricted() allows to turn this restricton off and back on.
setFocusRestricted(restricted: boolean): void; // web only


// The focus does not go inside the view with limitFocusWithin by default,
// setFocusLimited() allows to turn this limitation off and back on.
setFocusLimited(limited: boolean): void; // web only

WebView

• این کامپوننت محتویات HTML را در یک کنترل مرورگر جاسازی شده نمایش می دهد.

Types:

 None = 0,
    AllowForms = 1 << 0,
    AllowModals = 1 << 1,
    AllowOrientationLock = 1 << 2,
    AllowPointerLock = 1 << 3,
    AllowPopups = 1 << 4,
    AllowPopupsToEscapeSandbox = 1 << 5,
    AllowPresentation = 1 << 6,
    AllowSameOrigin = 1 << 7,
    AllowScripts = 1 << 8,
    AllowTopNavigation = 1 << 9
}

interface WebViewNavigationState {
    canGoBack: boolean;
    canGoForward: boolean;
    loading: boolean;
    url: string;
    title: string;
}

interface WebViewErrorState {
    description: string;
    domain: string;
    code: string;
}

Props:

// Allow javascript code to call storage methods?
domStorageEnabled: boolean = true; // Native only

// JavaScript code that is injected into the control and executed
injectedJavaScript: string = undefined;

// Is JavaScript executed within the control?
javaScriptEnabled: boolean = true;

// HTTP headers to include when fetching the URL.
headers: { [headerName: string]: string } = undefined;

// Called when an error occurs that prevents the contents from loading
onError: (e: SyntheticEvent) => void = undefined; // Native only

// Called when the contents successfully load
onLoad: (e: SyntheticEvent) => void = undefined;

// Called when the contents start to load
onLoadStart: (e: SyntheticEvent) => void = undefined; // Native only

// Called when the navigation state changes
onNavigationStateChange: (navigationState: WebViewNavigationState) => void;

// Flags that restrict behaviors within the control
sandbox: WebViewSandboxMode = None; // Web only

// Zooms the page contents to fit the available space
scalesPageToFit: boolean = false;

// Start loading immediately or wait for reload?
startInLoadingState: boolean = true; // Native only

// See below for supported styles
style: WebViewStyleRuleSet | WebViewStyleRuleSet[] = [];

// URL to HTML content
url: string = undefined;

Methods:

goBack();
goForward();

// Posts a message to the web control, allowing for communication between
// the app and the JavaScript code running within the web control
// Available only on web
postMessage(message: string, targetOrigin?: string = '*'): void;

// Force the page to reload
reload();

" این مقاله را با دوستان خود به اشتراک بگذارید"

"مجموعه ABLY"