React Native 代码解释答案

【问题标题】：React Native code explanationReact Native 代码解释
【发布时间】：2018-05-10 07:56:53
【问题描述】：

我有一个简单的应用程序项目，如果有人能解释代码背后的逻辑，我将不胜感激。

单击按钮时，文本输入中的文本会出现在 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。例如它做什么以及我什么时候可以使用它。还请逐步解释组件之间定义和传输数据的顺序。

【问题讨论】：

对不起！ SO 不是所有这些教程的平台。请提出一些相关问题。

标签： react-native state setstate react-props two-way-binding

【解决方案1】：

首先，stackoverflow 不是这类问题的平台。你必须先自己理解，然后你有任何疑问，然后用代码写出来。无论如何，我会解释当你运行你的项目时它会如何调用。

第一步： 首先加载FilterView.js，然后加载您在import 标记和render 函数中编写的所有内容。

第二步 那么this.state 是可变的。这意味着 state 可以在将来更新，而 props 不能。我们可以在构造函数中初始化 state，然后当我们想改变它的时候调用 setState。

第三步 然后render 方法调用显示你想要/写的内容。

第四步 那么captureScreenFunction 是一个函数，你必须调用Button 的onPress 事件，onTextReceived 也是一个调用onTextChange 方法的函数。函数可以以不同的方式绑定，但这里 captureScreenFunction 是这样绑定的 captureScreenFunction = () => {} 或者你可以像这样绑定 this.captureScreenFunction = this.captureScreenFunction.bind(this);

第四步 DynamicText.js 文件使用写入此文件的this.props 获取数据。在这个文件onChange = (text) => {} 中调用onChangeText() 函数，该函数使用this.props 在FilterView.js 中编写。

最后default.props我给你一个链接，请参考这个。 defaultProps in React Native?

希望对你有帮助。

【讨论】：