React Native：显示/隐藏<text>通过切换图标按钮组件</text>

Question

我正在尝试创建一个组件，该组件将包含一个组件列表，其中包含通过道具传递的数据。

但是，当用户第一次查看屏幕时，我希望默认隐藏文本并显示八个下划线，但是当用户单击图标时，将显示通过道具传递的文本数据。

以下面的例子为例：

数据：

const data = {
First,
Second,
Third,
Fourth
}

默认屏幕：

<View>
<Icon onPress()/>
<ul>
<li>
<Text>_ _ _ _ _ _ _ _ </Text
</li>
<li>
<Text>_ _ _ _ _ _ _ _ </Text
</li>
<li>
<Text>_ _ _ _ _ _ _ _ </Text
</li>
<li>
<Text>_ _ _ _ _ _ _ _ </Text
</li>
</ul>
</View>

按下后：

<View>
<Icon onPress()/>
<ul>
<li>
<Text> First </Text
</li>
<li>
<Text> Second </Text
</li>
<li>
<Text> Third </Text
</li>
<li>
<Text> Fourth </Text
</li>
</ul>
</View>

我对 React 还是很陌生，尤其是在操作 state 时，我想知道如何实现上述目标？

Answer 1

您需要的是一个切换来显示或隐藏您的文本。

这里的例子：

import React from 'react'
import { SafeAreaView, Text } from 'react-native'

const data = [
    "First",
    "Second",
    "Third",
    "Forth"
]

export default props => {

    const [show, setShow] = React.useState(false)
    const toggleText = () => setShow(show => !show)

    return (
        <SafeAreaView>
            <Text onPress={toggleText}>Toggle</Text>
            {
                data.map((text,index) =>
                    <Text key={index}>
                    {show ? text : "_ _ _ _ _ _ _ _"}
                    </Text>
                )
            }
        </SafeAreaView>
    )
}

Answer 2

你不能在 react-native 中使用ul和li ，试试FlatList 。
您可以使用useState和条件渲染。

const data = [
First,
Second,
Third,
Fourth
];

const [show, setShow] = useState(false);


return (
<View>
      <Icon onPress={() => setShow(true)}/>
      <FlatList
        data={data}
        renderItem={({ item }) => <Text> {show ?  item : '_ _ _ _ _ _ _ _'} </Text>}
      />
</View>
)