如何在React Native中单击可触摸不透明度时更新边框样式（使用expo）

Question

我对原生反应有点陌生，我正在从之前的屏幕中获取参数，并根据这些参数从 API 获取数据。

我正在使用平面列表来显示这些数据（在 touchableOpacity 中），现在我希望如果单击任何项目 - 其边框颜色应从红色更改为绿色。

下面是我的代码

import { View, Text,TextInput, TouchableOpacity, SafeAreaView, FlatList } from 'react-native'
import React, { useEffect, useState } from 'react'
import { useNavigation, useRouter, useLocalSearchParams } from 'expo-router'
import { StyleSheet } from 'react-native';
import {Colors} from '../../../constants/Colors'



export default function index() {
    const navigation = useNavigation();
    const router = useRouter();
    const { course, div } = useLocalSearchParams()
    console.log({course, div})
    const [data, setData] = useState(null);
    const [selectedStuId, setSelectedStuId] = React.useState(1);

    const changeSelectedStudent = function (id) {
        console.log(selectedStuId);
        setSelectedStuId(id);
        console.log(selectedStuId);
      };

    useEffect(()=>{
        navigation.setOptions({
            headerShown:false
          })
       

      },[])

      useEffect(()=>{

        const getUserAuthentication = async () => {
          try {
            
              if(!course && !div)
              {
                ToastAndroid.show('Something went wrong',ToastAndroid.BOTTOM);
                return;
              }
    
            const response = await fetch(
              'https://www.mywebsite.com/fetchStudentListAPI.php',
              {
                method:'POST',
                headers: {
                  Accept: 'application/json',
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  firstParam: course,
                  secondParam: div
                }),
              }
            );
            const json = await response.json();
            setData(json);
           
           
           // return json;
            console.log(json[0].stu_name);
            
    
          } catch (error) {
            console.error(error);
          }
        };
        getUserAuthentication();
          
    
    
      },[])

     

  return (
    <View style={{
        padding:25,
        paddingTop:50,
        backgroundColor:Colors.WHITE,
        height:'100%'
      }}>
      <Text style={{
        fontFamily:'Poppins-Bold',
        fontSize:30,
        textAlign:'center'
      }}>Take Attendance</Text>

<Text style={{
        fontFamily:'Poppins-Bold',
        fontSize:18,
        textAlign:'center'
      }}>Course: {course} Div: {div}</Text>

      

    <SafeAreaView style={styles.container}>
      <FlatList 
        data={data}
        extraData={setSelectedStuId}
        renderItem={({ item }) => 
            
            <TouchableOpacity
                    onPress={() => {
                        changeSelectedStudent(item.stu_id);
                    }}>
            <Text style={item.stu_id === setSelectedStuId // <-- match id property
                          ? styles.item
                          : styles.itemSelected}>{item.stu_roll_no} {item.stu_name}</Text>
            </TouchableOpacity>
        }
            
        
        keyExtractor={(item) => item.stu_id}
      />
    </SafeAreaView>

    <TouchableOpacity  style={{
        padding:20,
        backgroundColor:Colors.PRIMARY,
        borderRadius:15,
        marginTop:50
      }}>
        <Text style={{
          color:Colors.WHITE,
          textAlign:'center',
          fontFamily:'Poppins'
          }}> Submit </Text>
      </TouchableOpacity>


    </View>
  )
}

const styles = StyleSheet.create({
    container: {
      padding: 50,
      flex: 1,
    },
    item: {
      padding: 20,
      fontSize: 15,
      marginTop: 5,
      borderWidth:1,
      borderRadius:15,
      borderColor:Colors.GREEN,
      fontFamily:'Poppins',
    },
    itemSelected: {
        padding: 20,
        fontSize: 15,
        marginTop: 5,
        borderWidth:1,
        borderRadius:15,
        borderColor:Colors.RED,
        fontFamily:'Poppins',
      },
    
  });

Answer 1

您可以使用新的 Pressable 组件代替

TouchableOpacity

。它采用 style 属性的按下参数，您可以使用它来更改

borderColor

或项目的任何样式。您还可以在

Components

的子

Pressable

上使用按下的道具。这是一个工作示例：

<Pressable
  onPress={() => {
    setTimesPressed(current => current + 1);
  }}
  style={({pressed}) => [
    {
      backgroundColor: pressed ? 'green' : 'red',
    },
    styles.wrapperCustom,
  ]}>
  {({pressed}) => <Text style={styles.text}>{pressed ? 'Pressed!' : 'Press Me'}</Text>}
</Pressable>

希望这有帮助。