Here we first create a project, here we refer to the umi official document https://v3.umijs.org/zh-CN/docs/getting-started
and then we write the code in the index.tsx file in the pages folder.
Here we need When using antd-mobile,
we refer to the official antd-mobile document https://antd-mobile.gitee.io/zh/guide/quick-start
and then we need to use the NavBar component in the antd-mobile component library.
<NavBar backArrow={
false} right={
right} style={
{
"backgroundColor": sco, color: "white" }}>用户登录</NavBar>
The backArrow property inside is the NavBar's own property, which is used to close and open our arrows.
Then we need to define two methods sco and right method
const [sco, setSco] = useState("#123456")
Here we give the title bar a default color
const right = (
<div style={
{
fonstSize: 20 }}>
<Space>
<Button onClick={
left} fill="none" style={
{
color: "white" }}>切换主题</Button>
</Space>
</div>
)
Then we use a label in the defined method, and then add a click event to determine the color to be rendered. The
fill method is a built-in attribute of antd-mobile to change our style.
const [inp, setinp] = useState(["pink", "black", "red", "yellow"])
let left = () => {
let ids = Math.floor(Math.random() * inp.length)
setSco(inp[ids])
}
Here we define the color to be changed, and then use the Math method in the left method to determine the color to be changed.