seeLess seeMore react native
Dưới đây là phần code seeless/seemore trong react native nha
✌Class component
import React from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
class App extends React.PureComponent {
static defaultProps = {
maxLine: 4,
lineHeight: 14,
style: null,
};
constructor(props) {
super(props);
this.state = {
showMore: false,
maxLine: props.maxLine,
};
}
onPressShowMore = () => {
const {showMore} = this.state;
this.setState({
showMore: !showMore,
maxLine: !showMore ? this.props.maxLine : 0,
});
};
onLayout = (event) => {
const {height} = event.nativeEvent.layout;
const {lineHeight} = this.props;
const {maxLine} = this.state;
const maxHeight = maxLine * lineHeight;
if (maxLine > 0 && height > maxHeight) {
this.setState({showMore: true});
}
};
render() {
const {style, styleText, content, maxLine} = this.props;
const {showMore} = this.state;
return (
<View style={[style, styles.container]}>
<Text
style={[styles.text, styleText]}
numberOfLines={showMore ? maxLine : 0}
ellipsizeMode="tail"
onLayout={(event) => this.onLayout(event)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
finibus dapibus placerat. Nullam dui lacus, venenatis sed dapibus at,
luctus et ante. Integer non nibh vitae lacus gravida feugiat ac et
neque. Sed mattis nec risus et bibendum. Proin eu erat dui. Maecenas
malesuada, mauris ut gravida varius, risus arcu facilisis odio,
venenatis dignissim mauris dolor at metus. Donec a purus tortor. Sed
lectus lorem, faucibus id lorem at, congue aliquet leo. Vivamus auctor
velit sed aliquet blandit. Nam in lorem ut diam tincidunt efficitur
vel quis augue. Cras semper nunc eros, in imperdiet leo volutpat non.
</Text>
<TouchableOpacity onPress={this.onPressShowMore}>
<Text style={styles.textShowMore} onPress={this.onPressShowMore}>
{showMore ? 'Show More' : 'Show Less'}
</Text>
</TouchableOpacity>
</View>
);
}
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
},
text: {},
textShowMore: {
color: 'blue',
marginTop: 4,
fontSize: 12,
},
});
✌Functional component
import React, {useState} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';
const App = (props: any) => {
const {maxLine, lineHeight, containerStylesProps, textStylesProps} = props;
const lineHeightProps = lineHeight || 14;
const maxLineProps = maxLine || 4;
const [showMore, setShowMore] = useState(false);
const [maxLineState, setMaxLineState] = useState(maxLine);
const onPressShowMore = () => {
if (!showMore) {
setMaxLineState(maxLineProps);
} else {
setMaxLineState(0);
}
setShowMore(!showMore);
};
const onLayout = (event: any) => {
const {height} = event.nativeEvent.layout;
const maxHeight = maxLineState * lineHeightProps;
if (maxLineState > 0 && height > maxHeight) {
setShowMore(true);
}
};
return (
<View style={[styles.container, containerStylesProps]}>
<Text
style={[styles.text, textStylesProps]}
numberOfLines={showMore ? maxLineState : 0}
ellipsizeMode="tail"
onLayout={(event) => onLayout(event)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fi
snibus dapibus placerat. Nullam dui lacus, venenatis sed dapibus
at,luctus et ante. Integer non nibh vitae lacus gravida feugiat ac et
neque. Sed mattis nec risus et bibendum. Proin eu erat dui. Maecenas
malesuada, mauris ut gravida varius, risus arcu facilisis odio,
venenatis dignissim mauris dolor at metus. Donec a purus tortor. Sed
lectus lorem, faucibus id lorem at, congue aliquet leo. Vivamus auctor
velit sed aliquet blandit. Nam in lorem ut diam tincidunt efficitur vel
quis augue. Cras semper nunc eros, in imperdiet leo volutpat non.
</Text>
<TouchableOpacity onPress={onPressShowMore}>
<Text style={styles.textShowMore} onPress={onPressShowMore}>
{showMore ? 'Show More' : 'Show Less'}
</Text>
</TouchableOpacity>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {},
text: {},
textShowMore: {
color: 'blue',
marginTop: 4,
fontSize: 12,
},
});
Tags:
component