REACT NATIVE:我如何将示例代码更改为带有钩子的函数组件?

Question

如何将示例代码更改为带有钩子的函数组件?在我的例子中，我想使用函数组件和钩子，但我是新的，很乐意帮助这个主题。这段代码是情态动词的一个例子。该代码允许执行几种打开类型的情态，我想知道如何将其更改为函数组件。

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

export default class Example extends Component {
state = {
visibleModal: null,
};
_renderButton = (text, onPress) => (
<TouchableOpacity onPress={onPress}>
<View style={styles.button}>
<Text>{text}</Text>
</View>
</TouchableOpacity>
);
_renderModalContent = () => (
<View style={styles.modalContent}>
<Text>Hello!</Text>
{this._renderButton('Close', () => this.setState({ visibleModal: null }))}
</View>
);
render() {
return (
<View style={styles.container}>
{this._renderButton('Default modal', () => this.setState({ visibleModal: 1 }))}
{this._renderButton('Sliding from the sides', () => this.setState({ visibleModal: 2 }))}
{this._renderButton('A slower modal', () => this.setState({ visibleModal: 3 }))}
{this._renderButton('Fancy modal!', () => this.setState({ visibleModal: 4 }))}
{this._renderButton('Bottom half modal', () => this.setState({ visibleModal: 5 }))}
<Modal isVisible={this.state.visibleModal === 1}>
{this._renderModalContent()}
</Modal>
<Modal
isVisible={this.state.visibleModal === 2}
animationIn={'slideInLeft'}
animationOut={'slideOutRight'}
>
{this._renderModalContent()}
</Modal>
<Modal
isVisible={this.state.visibleModal === 3}
animationInTiming={2000}
animationOutTiming={2000}
backdropTransitionInTiming={2000}
backdropTransitionOutTiming={2000}
>
{this._renderModalContent()}
</Modal>
<Modal
isVisible={this.state.visibleModal === 4}
backdropColor={'red'}
backdropOpacity={1}
animationIn={'zoomInDown'}
animationOut={'zoomOutUp'}
animationInTiming={1000}
animationOutTiming={1000}
backdropTransitionInTiming={1000}
backdropTransitionOutTiming={1000}
>
{this._renderModalContent()}
</Modal>
<Modal isVisible={this.state.visibleModal === 5} style={styles.bottomModal}>
{this._renderModalContent()}
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
backgroundColor: 'lightblue',
padding: 12,
margin: 16,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
borderColor: 'rgba(0, 0, 0, 0.1)',
},
modalContent: {
backgroundColor: 'white',
padding: 22,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
borderColor: 'rgba(0, 0, 0, 0.1)',
},
bottomModal: {
justifyContent: 'flex-end',
margin: 0,
},
});

Answer 1

完整功能组件代码:

import React, { useState } from "react";
import { Text, TouchableOpacity, StyleSheet, View } from "react-native";
import Modal from "react-native-modal";
const Example = () => {
const [visibleModal, setVisibleModal] = useState(null);
const _renderButton = (text, onPress) => (
<TouchableOpacity onPress={onPress}>
<View style={styles.button}>
<Text>{text}</Text>
</View>
</TouchableOpacity>
);
const _renderModalContent = () => (
<View style={styles.modalContent}>
<Text>Hello!</Text>
{_renderButton("Close", () => setVisibleModal(null))}
</View>
);
return (
<View style={styles.container}>
{_renderButton("Default modal", () => setVisibleModal(1))}
{_renderButton("Sliding from the sides", () => setVisibleModal(2))}
{_renderButton("A slower modal", () => setVisibleModal(3))}
{_renderButton("Fancy modal!", () => setVisibleModal(4))}
{_renderButton("Bottom half modal", () => setVisibleModal(5))}
<Modal isVisible={visibleModal === 1}>
{_renderModalContent()}
</Modal>
<Modal
isVisible={visibleModal === 2}
animationIn={"slideInLeft"}
animationOut={"slideOutRight"}
>
{_renderModalContent()}
</Modal>
<Modal
isVisible={visibleModal === 3}
animationInTiming={2000}
animationOutTiming={2000}
backdropTransitionInTiming={2000}
backdropTransitionOutTiming={2000}
>
{_renderModalContent()}
</Modal>
<Modal
isVisible={visibleModal === 4}
backdropColor={"red"}
backdropOpacity={1}
animationIn={"zoomInDown"}
animationOut={"zoomOutUp"}
animationInTiming={1000}
animationOutTiming={1000}
backdropTransitionInTiming={1000}
backdropTransitionOutTiming={1000}
>
{_renderModalContent()}
</Modal>
<Modal isVisible={visibleModal === 5} style={styles.bottomModal}>
{_renderModalContent()}
</Modal>
</View>
);
};
export default Example;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
button: {
backgroundColor: "lightblue",
padding: 12,
margin: 16,
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
borderColor: "rgba(0, 0, 0, 0.1)",
},
modalContent: {
backgroundColor: "white",
padding: 22,
justifyContent: "center",
alignItems: "center",
borderRadius: 4,
borderColor: "rgba(0, 0, 0, 0.1)",
},
bottomModal: {
justifyContent: "flex-end",
margin: 0,
},
});

Answer 2

实际上很简单，请注意我所做的更改:

• no morethis
• no morerenderfunction
• useState使用

import React, { useState } from "react";
export default function Example() {
const [visibleModal, setVisibleModal] = useState(null)
_renderButton = (text, onPress) => (
<TouchableOpacity onPress={onPress}>
<View style={styles.button}>
<Text>{text}</Text>
</View>
</TouchableOpacity>
)
_renderModalContent = () => (
<View style={styles.modalContent}>
<Text>Hello!</Text>
{_renderButton('Close', () => setVisibleModal(null))}
</View>
)
return (
<View style={styles.container}>
{_renderButton('Default modal', () => setVisibleModal(1))}
{_renderButton('Sliding from the sides', () => setVisibleModal(2))}
{_renderButton('A slower modal', () => setVisibleModal(3))}
{_renderButton('Fancy modal!', () => setVisibleModal(4))}
{_renderButton('Bottom half modal', () => setVisibleModal(5))}
<Modal isVisible={visibleModal === 1}>
{_renderModalContent()}
</Modal>
<Modal
isVisible={visibleModal === 2}
animationIn={'slideInLeft'}
animationOut={'slideOutRight'}
>
{_renderModalContent()}
</Modal>
<Modal
isVisible={visibleModal === 3}
animationInTiming={2000}
animationOutTiming={2000}
backdropTransitionInTiming={2000}
backdropTransitionOutTiming={2000}
>
{_renderModalContent()}
</Modal>
<Modal
isVisible={visibleModal === 4}
backdropColor={'red'}
backdropOpacity={1}
animationIn={'zoomInDown'}
animationOut={'zoomOutUp'}
animationInTiming={1000}
animationOutTiming={1000}
backdropTransitionInTiming={1000}
backdropTransitionOutTiming={1000}
>
{_renderModalContent()}
</Modal>
<Modal isVisible={visibleModal === 5} style={styles.bottomModal}>
{_renderModalContent()}
</Modal>
</View>
)
}

Answer 3

const CompenentName = () => {
const [visibleModal, setModalVisibility] = React.useState(null);
const _renderButton = ({ text, onPress }) => (
<TouchableOpacity onPress={onPress}>
<View style={styles.button}>
<Text>{text}</Text>
</View>
</TouchableOpacity>
);
const _renderModalContent = () => (
<View style={styles.modalContent}>
<Text>Hello!</Text>
<_renderButton text='Close' onPress={() => setModalVisibility(null)} />
</View>
);
return (
<View style={styles.container}>
<_renderButton text='Default modal' onPress={() => setModalVisibility(1)} />
<_renderButton text='Sliding from the sides' onPress={() => setModalVisibility(2)} />
<_renderButton text='A slower modal' onPress={() => setModalVisibility(3)} />
<_renderButton text='Fancy modal!' onPress={() => setModalVisibility(4)} />
<_renderButton text='Bottom half modal' onPress={() => setModalVisibility(5)} />
<Modal isVisible={visibleModal === 1}>
<_renderModalContent />
</Modal>
<Modal
isVisible={visibleModal === 2}
animationIn={'slideInLeft'}
animationOut={'slideOutRight'}
>
<_renderModalContent />
</Modal>
<Modal
isVisible={visibleModal === 3}
animationInTiming={2000}
animationOutTiming={2000}
backdropTransitionInTiming={2000}
backdropTransitionOutTiming={2000}
>
<_renderModalContent />
</Modal>
<Modal
isVisible={visibleModal === 4}
backdropColor={'red'}
backdropOpacity={1}
animationIn={'zoomInDown'}
animationOut={'zoomOutUp'}
animationInTiming={1000}
animationOutTiming={1000}
backdropTransitionInTiming={1000}
backdropTransitionOutTiming={1000}
>
<_renderModalContent />
</Modal>
<Modal isVisible={visibleModal === 5} style={styles.bottomModal}>
<_renderModalContent />
</Modal>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
backgroundColor: 'lightblue',
padding: 12,
margin: 16,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
borderColor: 'rgba(0, 0, 0, 0.1)',
},
modalContent: {
backgroundColor: 'white',
padding: 22,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
borderColor: 'rgba(0, 0, 0, 0.1)',
},
bottomModal: {
justifyContent: 'flex-end',
margin: 0,
},
});
export default CompenentName;