React Native如何替换数组元素实现多语言按钮选中状态切换

核心逻辑说明 #

你现在的langues是固定写死的常量，无法直接修改值，且React组件需要通过状态（state）驱动界面更新，所以我们只需要把语言列表放到React的useState里管理，再给按钮绑定点击事件修改状态即可。

分步实现 #

• 第一步：引入useState钩子（如果已经引入过对应依赖可以跳过）

import { useState } from 'react';
import { View, Pressable, Text, StyleSheet } from 'react-native';
import AntDesign from '@expo/vector-icons/AntDesign'; // 如果你用的是其他引入方式改成自己的即可

• 第二步：把语言列表放到state中管理，替代原来的硬编码常量
• 第三步：写点击切换的处理函数，点击对应语言时把它的selected设为true，其他设为false
• 第四步：给Pressable绑定onPress事件，传入当前点击的语言id

完整可运行代码 #

import { useState } from 'react';
import { View, Pressable, Text, StyleSheet } from 'react-native';
import AntDesign from '@expo/vector-icons/AntDesign';

// 把原来的硬编码数组拿出来当state的初始值
const initLangues = [
  {
    id:0,
    title: 'Français',
    selected: true
  },
  {
    id:1,
    title: 'English',
    selected: false
  }
];

function Settings() {
  // 用state存语言列表，修改state的时候界面会自动刷新
  const [langues, setLangues] = useState(initLangues);

  // 处理语言切换的函数，接收点击的语言id作为参数
  const handleSelectLang = (selectedId) => {
    // 遍历所有语言，id匹配的设为选中，其他设为未选中
    const updatedLangues = langues.map(lang => {
      return {
        ...lang,
        selected: lang.id === selectedId
      }
    })
    // 把更新后的列表存回state
    setLangues(updatedLangues);
  }

  return(
     <View>
         {/* 这里map的时候要把id也取出来，用来传参 */}
         {langues.map(({id, title, selected}) => (
            <View key={id}>
               {/* 绑定点击事件，点击的时候调用处理函数传当前语言的id */}
               <Pressable 
                style={styles.LanguesButton}
                onPress={() => handleSelectLang(id)}
               >
                  {selected && <AntDesign size={15} name={'checkcircle'} /> }
                  <Text style={ {paddingLeft:selected ? 15 : 30} }>{title}</Text>
               </Pressable>
           </View>
         ))}
     </View>
   )
}

// 补充示例样式，可替换为你自己的样式
const styles = StyleSheet.create({
  LanguesButton: {
    flexDirection: 'row',
    alignItems: 'center',
    marginVertical: 10,
    marginHorizontal: 20
  }
})

export default Settings;

补充说明 #

• 给map渲染的列表项加了key={id}属性，这是React要求的标准写法，可避免控制台报warning
• 后续如果要新增其他语言，只要给对应语言项加唯一id，现有切换逻辑不需要修改即可直接使用

内容的提问来源于stack exchange，提问作者Sevlac