读取 Parent 状态的值并将 Boolean 传递给子组件 React

Question

我在学习如何在 React Native 中的父子之间传递数据时遇到了麻烦。

在我的父组件中，我有一个状态属性 (audioPlaying)，它是一个布尔值。

state = {
    //The title informs the Button and TitleArea components
    title: 'hello',
    audioPlaying: false,
};

我想在按下按钮 (onPress) 时更改该值。

<Button
    title={this.state.title}
    onPress={this.playPauseHandler}
    audioPlaying={this.state.audioPlaying}
/>

...通过调用 playPauseHandler。

playPauseHandler = () => {
    this.setState(prevState => ({
        audioPlaying: !prevState.audioPlaying
    }));
}

然后在我的子 (Button) 组件中，我想评估 audioPlaying 状态属性。如果是真的，我想展示一件事，如果是假的，我想展示另一件事。

<View style={styles.playBtnStyle}>
    {this.props.audioPlaying === false ? (
        <MaterialIcons
            name='play-arrow'
            size={50}
            color="#87888C"
        />
        ) : (
        <MaterialIcons
            name='pause'
            size={50}
            color="#87888C"
        />
        )}
    }
</View>

但是，当我运行它时，我无法确定 audioPlaying 的值。 React Native Error Message

以下是两者的完整文件：

App.js

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

import Carousel from './src/components/Carousel/Carousel';
import Button from './src/components/Button/Button';
import TitleArea from './src/components/TitleArea/TitleArea';
import MapArea from './src/components/MapArea/MapArea';

const styles = {
	container: {
		flex: 1,
		justifyContent: 'space-between',
	},
	playArea: {
		flex: 1,
	},
};

export default class App extends Component {
	state = {
		//The title informs the Button and TitleArea components
		title: 'hello',
		audioPlaying: false,
	};

	playPauseHandler = () => {
		this.setState(prevState => ({
			audioPlaying: !prevState.audioPlaying
		}));
	}

	render() {
		return (
			<View style={styles.container}>
				<TitleArea title={this.state.title} />
				<StatusBar hidden={false} />
				<Carousel />
				<MapArea />
				<Button
					title={this.state.title}
					onPress={this.playPauseHandler}
					audioPlaying={this.state.audioPlaying}
				/>
			</View>
		);
	}
}

Button.js

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, Dimensions } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const { width } = Dimensions.get('window');
const height = width * 0.2;
const styles = {
	textStyle: {
		color: '#87888C',
		fontSize: 18,
		fontWeight: '600',
		backgroundColor: 'white',
		alignSelf: 'center',
	},
	buttonContainer: {
		height,
		flexDirection: 'row',
		backgroundColor: 'white',
		alignItems: 'center',
	},
	playBtnStyle: {
		marginLeft: 50,
		backgroundColor: 'white',
	},
	childStyle: {
		flex: 1,
	},
};

const button = (props) => {
	return (
		<View style={styles.buttonContainer}>
			<TouchableOpacity>
				<View style={styles.playBtnStyle}>
					{this.props.audioPlaying === false ? (
						<MaterialIcons
							name='play-arrow'
							size={50}
							color="#87888C"
						/>
					 ) : (
						<MaterialIcons
							name='pause'
							size={50}
							color="#87888C"
						/>
					 )}
					}
				</View>
			</TouchableOpacity>

			<View style={styles.childStyle}>
				<Text style={styles.textStyle}>Chapter 1: {props.title}</Text>
			</View>
		</View>
	);
}

export default button;

Answer 1

按钮上下文中没有this。那只是一个返回 JSX 的函数。 相反，请使用props

<View style={styles.playBtnStyle}>
  {props.audioPlaying === false ? (
    <MaterialIcons
      name='play-arrow'
      size={50}
      color="#87888C"
    />
  ) : (
    <MaterialIcons
      name='pause'
      size={50}
      color="#87888C"
    />
  )}
</View>

Answer 2

好的，我解决了我自己的问题！ （成为开发人员的第一步）

两个问题：

捕捉触摸事件

React Native 有所谓的 Touchables。根据文档，这些是“使视图正确响应触摸的包装器”。

TouchableOpacity，我正在使用的那个：

按下时，包裹视图的不透明度会降低，使其变暗。通过将子项包装在 Animated.View 中来控制不透明度，该 Animated.View 将添加到视图层次结构中。

https://facebook.github.io/react-native/docs/touchablewithoutfeedback#onpress

所有 Touchable 都接受 onPress 属性。因此，通过将 onPress 属性添加到 Touchable，我可以捕获触摸事件，而不仅仅是触发它。

将回调传递给父级

这篇文章帮助我更多地了解了如何从子级调用父函数。

https://medium.com/@thejasonfile/callback-functions-in-react-e822ebede766

所以我在 TouchableOpacity 中调用 playPause()（我重命名了道具并对其进行了解构），它从触摸事件触发，导致状态改变和组件重新渲染。

const button = (props) => {
  const {
    title,
    audioPlaying,
    playPause,
  } = props;
  return (
        <View style={styles.buttonContainer}>
            <TouchableOpacity onPress={() => playPause()}>
                <View style={styles.playBtnStyle}>
                    {audioPlaying === false ? (
                        <MaterialIcons
                            name='play-arrow'
                            size={50}
                            color="#87888C"
                        />
                    ) : (
                            <MaterialIcons
                                name='pause'
                                size={50}
                                color="#87888C"
                            />
                    )
                    }
                </View>
            </TouchableOpacity>
            <View style={styles.childStyle}>
                <Text style={styles.textStyle}>
                  Chapter 1:
                    {title}
                </Text>
            </View>
        </View>
  );
};