Реагировать на родной код

Question

У меня есть простой проект прикладного приложения, который я был бы признателен, если бы кто-нибудь объяснил логику кода.

При нажатии на кнопку текст, который находится внутри ввода текста, появляется на изображении imageBackground.

FilterView.js:

import React, { Component } from 'react';
import { 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    Button, Platform, TouchableOpacity, TextInput, ImageBackground } from 'react-native';
import { captureRef } from "react-native-view-shot";
import { Input } from 'react-native-elements';
import DynamicText from './DynamicText';

export default class FilterView extends Component {
    constructor(props) {
        super(props);

        this.state = {
            text: '',
            imageURI: 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg',
        }
    }

    captureScreenFunction = () => {
        captureRef({
            format: "jpg",
            quality: 0.8
        })
        .then(
            uri => this.setState({ imageURI: uri }),
            error => console.error("Oops, Something Went Wrong", error)
        );
    }

    onTextReceived = (text) => {
        this.setState({text});
    }

    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Button title="Capture Device Screenshot" onPress={this.captureScreenFunction} />
                <ImageBackground source={{uri: this.state.imageURI}} style={{ 
                    width: 200, 
                    height: 300, 
                    marginTop: 5, 
                    alignItems: 'center', 
                    justifyContent: 'center'
                }}>
                    <Text style={{color: 'white'}}>{this.state.text}</Text>
                </ImageBackground>
                <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
                    <View>
                        <DynamicText onChangeText={this.onTextReceived}/>
                    </View>
                </View>
            </View>
        );
    }
}  

DynamicText.js:

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button, Platform, TouchableOpacity, TextInput, ImageBackground } from 'react-native';

export default class DynamicText extends Component {
    constructor(props) {
        super(props);

        this.state = {
            text: '',
            mode: 1 // 1 = edit, 2 = view
        }
    }

    onChange = (text) => {
        this.setState({text});
        this.props.onChangeText(text);
    }

    render() {
        return (
            <View ref="dymanicView">
                <TextInput
                    ref="newItemText"
                    style={{ height: 40 }}
                    placeholder="Type something..."
                    onChangeText={(text) => this.onChange(text)}
                />
            </View>
        )
    }
}

DynamicText.defaultProps = {
    onChangeText: () => {}
}

Я хотел бы понять о defaultProps.Например, что он делает и когда я могу его использовать.Также, пожалуйста, объясните шаг за шагом порядок определения и передачи данных между компонентами.

Answer 1

Прежде всего, stackoverflow не является платформой для такого типа вопросов. Вы должны сначала понять сами, а затем все же у вас есть какие-либо сомнения, а затем поставить их с кодом. В любом случае я объясню, как он будет вызываться при запуске проекта.

шаг 1: сначала загружается FilterView.js, затем загружается все, что вы написали в тег import и в функцию render.

шаг 2 тогда this.state является изменчивым. Это означает, что состояние может быть обновлено в будущем, а реквизит - нет. мы можем инициализировать состояние в конструкторе, а затем вызвать setState, когда мы хотим его изменить.

шаг 3 затем render вызов метода, который отображает, что вы хотите / написать.

* ** 1 022 тысяча двадцать-один * шаг 4 тогда captureScreenFunction - это функция, которую вы должны вызвать onPress событие Button, а onTextReceived - это также функция, которая вызывается для метода onTextChange. функция может быть привязана по-разному, но здесь captureScreenFunction привязывается вот так captureScreenFunction = () => {} или вы можете привязывать вот так this.captureScreenFunction = this.captureScreenFunction.bind(this);

шаг 4 Файл DynamicText.js получает данные, используя this.props, который записывается в этот файл. В этом файле onChange = (text) => {}, который вызывает onChangeText() функцию, которая написана внутри FilterView.js с использованием this.props.

и наконец для default.props Я даю вам ссылку, пожалуйста, отошлите это. defaultProps в React Native?

Надеюсь, это поможет вам.