In the spirit of me for everyone and everyone for me, the code I have struck out must be shared!
The project needs to be a carousel of text. At first, I thought it was a bottom-up scroll, but it was still not very well written, so I took it a second best first and realized the scrolling of text through transparency (it can't be said to be scrolling, it's switching).
In order to post it, I wrote some comments, so I won’t explain them one by one. It’s very simple code, just read the comments. (I'm just lazy)
import React, { Component } from "react"
import { View, Text, TouchableOpacity } from "react-native"
export default class Text* extends Component {
constructor(props) {
super(props)
= {
nowText: "", // Displayed text opacity: 1, // Transparency index: 0, // Subscript list: [], // Scrolled list }
}
componentWillMount() {
const { list } =
({
nowText: list[0].title, // Insert the displayed text list, // Scrolled list })
() // Start timer A }
onStart = () => {
const { Intervals = 5000 } = // Intervals can be passed as a parameter that is not required = setInterval(() => {
() // Intervals milliseconds start timer B }, Intervals)
};
onDisappear = () => {
this.timer1 = setInterval(() => {
const { opacity, index, list } =
if (opacity === 0) {
// When the transparency is 0, it starts to display in a text if (index + 2 > ) {
// When the currently displayed text is the last one, start again ({
nowText: list[0].title,
index: 0,
})
} else {
({
nowText: list[index + 1].title, // Next text index: index + 1,
})
}
() // show clearInterval(this.timer1)
return
}
({
opacity: parseFloat((opacity - 0.04).toFixed(2)),
})
}, 20)
};
onAppear = () => {
this.timer2 = setInterval(() => {
const { opacity } =
if (opacity === 1) {
clearInterval(this.timer2)
return
}
({
opacity: parseFloat((opacity + 0.04).toFixed(2)),
})
}, 20)
};
render() {
const { nowText, opacity, list, index } =
return (
<View style={{ borderWidth: 1, margin: 10, padding: 5, borderColor: "#dddddd" }}>
<TouchableOpacity activeOpacity={0.75} onPress={() => {(list[index].address)}}>
<View style={{ width: "80%" }}>
<Text
style={{
opacity,
fontSize: 14,
}}
>
{nowText}
</Text>
</View>
</TouchableOpacity>
</View>
)
}
}
Quote:
const tProps = {
list: [
{ id: 1, title: "It's not that this is difficult, but everything is difficult.", address: 1 },
{ id: 2, title: "Sister Wenshi, it's illegal", address: 2 },
{ id: 3, title: "Why do you need to express your heart in the middle of the night?", address: 3 },
{ id: 4, title: "Singing a love song after a broken heart means closing the window after a leak of gas", address: 4 },
],
}
...
<Text* {...tProps} />
Click to jump to tell me what I do:
Use the current index to take out the corresponding address and jump.
If you want to use react, just change the tag.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.