छोटों के लिए प्रतिक्रियाशील। मोबाइल विकास का अनुभव

हमें एक आवेदन की आवश्यकता क्यों है

• स्पंदन के लिए डार्ट (जावास्क्रिप्ट का विकल्प) का ज्ञान आवश्यक है। संबंधित प्रौद्योगिकियों का अध्ययन करने का समय नहीं था - मैं परिकल्पना का परीक्षण करने के लिए जल्दी से "उड़ना" चाहता था।
• Xamarin को C # का ज्ञान आवश्यक है। हमारे पास बैकएंड डेवलपर्स हैं, लेकिन आईओएस और एंड्रॉइड को अलग-अलग इंटरफेस की आवश्यकता होती है। वैसे भी, आपको कोड और कार्यान्वयन को डुप्लिकेट करना होगा।
• नेटिव स्क्रिप्ट को एंगुलर के साथ बांधने के लिए डिज़ाइन किया गया है। हमारी परियोजना ReactJS और Redux का उपयोग करती है, इसलिए नहीं।
• रिएक्ट नेटिव शांत लग रहा था, और उन्होंने उसे चुना। इसके अलावा, हम सिर्फ अन्य समाधानों के minuses और लाभों के बावजूद, इसे आज़माना चाहते थे।

मूल निवासी

• क्रॉस-प्लेटफ़ॉर्म । हम शुरू में iOS के तहत एप्लिकेशन लिखना चाहते थे, लेकिन Android के तहत अतिरिक्त लॉन्च एक बहुत बड़ा प्लस है।
• . , . React Native , 80% .
• . Telegram React Native 3000 . , , , .
• . — , . , ReactJS React Native.

• आप कस्टम देशी मॉड्यूल नहीं जोड़ सकते।
• एक्सपो रिएक्टिव नेटिव पर एक अमूर्त परत है। एक्सपो अपडेट होने तक आप फ्रेमवर्क के नए संस्करण में अपग्रेड नहीं कर सकते।

सामान्य तौर पर, चुनाव सरल है: हम एक प्रोटोटाइप विकसित करना चाहते हैं - हम एक्सपो का चयन करते हैं, हम संभावना के साथ एक आवेदन चाहते हैं - रिएक्टिव नेटिव सीएलआई।

हम एक आवेदन लिख रहे हैं

• क्रॉस प्लेटफार्म : View, Text, Imageऔर अन्य।
• प्रत्येक मंच के लिए विशिष्ट , उदाहरण के लिए, DatePickerIOSया DatePickerAndroid।

import React, {Component} from 'react';
import {Text, View, StyleSheet} from 'react-native';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Image style={styles.image} source={require('./img/main.png')}/>
                <Text style={styles.welcome}>Hello, SEMrush!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    image: {
        marginBottom: 20,
    },
});

क्रॉस-प्लेटफॉर्म

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
    height: Platform.OS === 'ios' & 200 : 100,
});

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        ...Platform.select({
            ios: {
                backgroundColor: 'red',
            },
            android: {
                backgroundColor: 'blue',
            },
        }),
    },
});

const Component = Platform.select({
    ios: () => require('ComponentIOS'),
    android: () => require('ComponentAndroid'),
})();

<Component />;

import {Platform} from 'react-native';

if (Platform.Version ===25) {
    console.log('Running on Nougat!');
}

import {Platform} from 'react-native';

const majorVersionIOS = parceInt(platform.Version, 10);
if (majorVersionIOS <= 9) {
    console.log('Work around a change in behavior');
}

अवयव

import React, { Component } from 'react';
import { Container, Header, Content, Button, Text } from 'native-base';
export default class ButtonThemeExample extends Component {
    render() {
        return (
            <Container>
                <Header />
                <Content>
                    <Button light><Text> Light </Text></Button>
                    <Button primary><Text> Primary </Text></Button>
                    <Button success><Text> Success </Text></Button>
                    <Button info><Text> Info </Text></Button>
                    <Button warning><Text> Warning </Text></Button>
                    <Button danger><Text> Danger </Text></Button>
                    <Button dark><Text> Dark </Text></Button>
                </Content>
            </Container>
        );
    }
}

पथ प्रदर्शन

• react-navigation Facebook React Native.
• wix/react-native-navigation — Wix. , , -, — .
• react-router — react-router ReactJS . , .
• airbnb/native-navigation — - Airbnb. , .

• लचीला क्रॉस-प्लेटफ़ॉर्म समाधान।
• प्रत्येक प्लेटफॉर्म के लिए नेटिव यूआई और स्क्रीन के बीच देशी बदलाव। हम ऐसा एप्लिकेशन नहीं बनाना चाहते थे जो Android पर iOS जैसा दिखे।
• यह सभी बुनियादी प्रकार के संक्रमण प्रदान करता है: निचले टैब, स्क्रीन, मोडल विंडो के बीच स्वाइप करें SwitchNavigator।

const HomeStack = createStackNavigator({
    Home: { screen: HomeScreen },
    Details: {screen: DetailsScreen },
});

const SettingsStack = createStackNavigator({
    Settings: { screen: SettingsScreen },
    Details: { screen: DetailsScreen },
});

const TabNavigator = createBottomTabNavigator({
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
});

export default createAppContainer(TabNavigator);

class HomeScreen extends React.Component {
    static navigationOptions = { title: 'Home' };

    render() {
        return (
            <View style={styles.container}>
                <Text>Home!</Text>
                <Button title="Go to Details" onPress={() => this.props.navigate('Details')}/>
            </View>
        );
    }
}

class SettingsScreen extends React.Component {
    static navigationOptions = { title: 'Settings' };

    render() {
        return (
            <View style={styles.container}>
                <Text>Settings!</Text>
                <Button title="Go to Details" onPress={() => this.props.navigate('Details')}/>
            </View>
        );
    }
}

class DetailsScreen extends React.Component {
    static navigationOptions = { title: 'Details' };

    render() {
        return (
            <View style={styles.container}>
                <Text>Details!</Text>
                <Button title="Go to Details" onPress={() => this.props.navigate('Details')}/>
            </View>
        );
    }
}

const Navigation = createAppContainer(TabNavigator);

//Render the app container component with the provider around it
export default class App extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <Navigation />
            </Provider>
        );
    }
}

अधिक घटकों की आवश्यकता है

भंडारण

एनिमेशन

export default class ProjectsScreen extends Component {

    state = {
        scrollY: new Animated.Value(
            Platform.OS === 'ios' ? -HEADER_MAX_HEIGHT : 0,
        ),
    };

    render() {
        const scrollY = Animated.add(
            this.state.scrollY,
            Platform.OS === 'ios' & HEADER_MAX_HEIGHT : 0,
        );
        const headerTranslate = scrollY.interpolate({
            inputRange: [0, HEADER_SCROLL_DISTANCE],
            outputRange: [0, -HEADER_SCROLL_DISTANCE],
            extrapolate: 'clamp',
        });

        return (
            <View>
                <Animated.View style={{ translform: [{ translatY: headerTranslate }] }}>
                    <SearchBar/>
                </Animated.View>
                <Animated.ScrollView
                    onScroll={Animated.event(
                        [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
                        { useNativeDriver: true },
                    )} contentInset={{
                        top: HEADER_MAX_HEIGHT,
                    }}
                    contentOffset={{
                        y: -HEADER_MAX_HEIGHT,
                    }}
                >
                    {this._renderScrollViewContent()}
                </Animated.ScrollView>
            </View>
        );
    }
}    

पहली बार में स्क्रीन की "टिमटिमा" की समस्या

कनेक्शन का नुकसान

• घटनाओं की सदस्यता लें और, इंटरनेट कनेक्शन बदलते समय, उपयोगकर्ता को संदेश प्रदर्शित करें;
• कनेक्शन की गुणवत्ता की जांच करें;
• जटिल अनुप्रयोगों के लिए कनेक्शन के प्रकार (एलटीई, वाईफाई, 3 जी) की जांच करें;
• अपने इंटरनेट कनेक्शन की जांच करने के लिए एक अनुरोध का उपयोग करें।

आवेदन डिबगिंग

देशी मॉड्यूल को जोड़ना

परिणाम

, , -, . , , « », . ++ 2020 — .

, , , , , — - , 5900.