React Native 알림 메시지
import React, {Component} from 'react'
import {
Text,
View,
Animated,
Easing,
StyleSheet,
} from 'react-native'
export default class ScrollVertical extends Component {
static defaultProps = {
enableAnimation: true,
};
constructor(props) {
super(props)
let translateValue= new Animated.ValueXY({x: 0, y: 0})
translateValue.addListener(({x,y})=>{
// Log('value',x,y)
})
this.state = {
translateValue: translateValue,
//
scrollHeight: this.props.scrollHeight || 32,
//
kb_content: [],
// Animated.View y
kb_tempValue: 0,
//
kb_contentOffsetY: 0,
//
delay: this.props.delay || 500,
//
duration: this.props.duration || 500,
enableAnimation: true,
}
}
render() {
return (
<View style={[styles.kbContainer, {height: this.state.scrollHeight}, this.props.kbContainer]}>
{
this.state.kb_content.length !== 0 ?
<Animated.View
style={[
{flexDirection: 'column'},
{
transform: [
{translateY: this.state.translateValue.y}
]
}
]}>
{this.state.kb_content.map(this._createKbItem.bind(this))}
</Animated.View> : null
}
</View>
)
}
componentWillReceiveProps(nextProps) {
Log('componentWillReceiveProps', nextProps)
this.setState({
enableAnimation: nextProps.enableAnimation?true:false
}, () => {
this.startAnimation();
}
)
}
componentDidMount() {
Log('componentDidMount')
let content = this.props.data || []
if (content.length !== 0) {
let h = (content.length + 1) * this.state.scrollHeight
this.setState({
kb_content: content.concat(content[0]),
kb_contentOffsetY: h
})
//
// this._startAnimation()
this.startAnimation();
}
}
_createKbItem(kbItem, index) {
return (
<View key={index}
style={[{justifyContent: 'center', height: this.state.scrollHeight}, this.props.scrollStyle]}>
<Text style={[styles.kb_text_c, this.props.textStyle]}>{kbItem.content}</Text>
</View>
)
}
startAnimation = () => {
if (this.state.enableAnimation) {
if(!this.animation){
this.animation = setTimeout(() => {
this.animation=null;
this._startAnimation();
}, this.state.delay);
}
}
}
componentWillUnmount() {
if (this.animation) {
clearTimeout(this.animation);
}
if(this.state.translateValue){
this.state.translateValue.removeAllListeners();
}
}
_startAnimation = () => {
this.state.kb_tempValue -= this.state.scrollHeight;
if (this.props.onChange) {
let index = Math.abs(this.state.kb_tempValue) / (this.state.scrollHeight);
this.props.onChange(index<this.state.kb_content.length-1?index:0);
}
Animated.sequence([
// Animated.delay(this.state.delay),
Animated.timing(
this.state.translateValue,
{
isInteraction: false,
toValue: {x: 0, y: this.state.kb_tempValue},
duration: this.state.duration, // ( ), 500
easing: Easing.linear
}
),
])
.start(() => {
//
// Log('end')
if (this.state.kb_tempValue - this.state.scrollHeight === -this.state.kb_contentOffsetY) {
//
this.state.translateValue.setValue({x: 0, y: 0});
this.state.kb_tempValue = 0;
}
this.startAnimation();
})
}
}
const styles = StyleSheet.create({
kbContainer: {
// border,
backgroundColor: 'transparent',
overflow: 'hidden'
},
kb_text_c: {
fontSize: 18,
color: '#181818',
}
쓰다
import React, {Component} from 'react';
import {
StyleSheet,
View,
TouchableOpacity,
Alert,
ScrollView,
ART,
TouchableHighlight,
ListView,
Dimensions,
Text
} from 'react-native';
import ScrollVertical from '../../app-widget/scroll-vertical'
const dataArray = [
{
title: ' ',
},
{
title: ' ',
},
{
title: ' ',
}
]
export default class extends React.Component {
render() {
let array = [{ content: '' }];
if (dataArray && dataArray.length > 0) {
array = [];
for (let item of dataArray) {
array.push({ content: item.title});
}
}
return (
<View style={{ padding: Constant.sizeMarginDefault, paddingBottom: 0, backgroundColor: '#FFFFFF' }}>
<TouchableOpacity onPress={() => {
if (dataArray && dataArray.length > 0) {
Log(dataArray[this.index].title)
}
}} style={{ flexDirection: 'row', backgroundColor: "#FFFFFF", alignItems: 'center', borderRadius: 8, paddingLeft: 5, paddingRight: 5 }}>
<Text style={{ fontSize: Constant.scaleFontSize(14) }} fontWeight={'bold'}> </Text>
<View style={{ marginLeft: 5, marginRight: 8, backgroundColor: '#b01638', borderRadius: 8, width: 22, alignItems: 'center', }}>
<Text style={{ color: 'white', fontSize: Constant.fontSizeSmall }}> </Text>
</View>
<View style={{ flexDirection: 'row', flex: 1 }}>
<ScrollVertical
onChange={(index => {
this.index = index;
})}
enableAnimation={true}
data={array}
delay={2500}
duration={1000}
scrollHeight={34}
scrollStyle={{ alignItems: 'flex-start' }}
textStyle={{ color: Constant.colorTxtContent, fontSize: Constant.fontSizeSmall }} />
</View>
<View style={{ height: 14, width: 1, backgroundColor: Constant.colorTxtContent }} />
<Text style={{ color: Constant.colorTxtContent, paddingLeft: Constant.sizeMarginDefault, fontSize: Constant.fontSizeSmall }}> </Text>
</TouchableOpacity>
</View>
);
}
};
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.