有没有办法在 React native 中单击按钮显示/隐藏功能组件

Question

有没有办法在反应原生功能组件中单击按钮时显示和隐藏组件？我有一个功能，其中有两个自定义按钮。如果选择了一个按钮并且如果选择了第二个按钮然后第一个按钮视图隐藏并显示第二个按钮视图，我想显示视图。我怎样才能做到这一点？ 这是我的功能代码..

     const SupportScreen = ({ props, navigation }) => {
          const lists = [
            {id: 1, title: 'Pending Tickets'},
            {id: 2, title: 'Resolved Tickets'},
          ];
          const [selected, setSelected] = useState(1);
        
     
    
     <View style={{flexDirection: 'row', marginTop: 10}}>
          {lists.map(list => (
            <CustomButton
              key={list.id}
              customclick={() => {
                handleColor(list);
              }}
              title={list.title}
              style={{
                backgroundColor:
                  list.id === selected
                    ? Constants.Colors.PRIMARY
                    : Constants.Colors.WALLTE_TXT_GRAY_COLOR,
                width: 180,
                elevation: 3,
              }}
              
              tColor={Constants.Colors.WHITE}
            
              tfz={12}></CustomButton>
            
            
          ))}
          
        </View>
        
           
        
          const handleColor = row => {
            setSelected(row.id);
        
          };
  </SafeAreaView>
  );
};

Answer 1

你可以这样实现

Working Example

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

const lists = [
  { id: 1, title: 'Pending Tickets' },
  { id: 2, title: 'Resolved Tickets' },
];

export default function App() {
  const [selected, setSelected] = React.useState(lists[0].id);

  return (
    <View style={styles.container}>
      {lists.map((list) => (
        <Button
          key={list.id}
          title={list.title}
          onPress={() => setSelected(list.id)} // Set Selected to this id
          color={list.id === selected ? 'dodgerblue' : 'grey'} // Render depending on the id 
          style={{
            width: 180,
            elevation: 3,
          }}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

对于基于 ID 渲染视图，您可以执行以下操作

{selected == 1 ? (
  <View>
      <Text>View One Here</Text>
    </View>
  ) : (
    <View>
      <Text>View Two Here</Text>
  </View>
)}

Answer 2

查看我的sample

import * as React from 'react';
import { Text, View, StyleSheet, Pressable } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const lists = [
    { id: 1, title: 'Pending Tickets 1', color: '#ff0000' },
    { id: 2, title: 'Resolved Tickets 2', color: '#ffff00'  },
    { id: 3, title: 'Resolved Tickets 3', color: '#ff00ff'  },
    { id: 4, title: 'Resolved Tickets 4', color: '#00ffff'  },
    { id: 5, title: 'Resolved Tickets 5', color: '#ccccc'  },
    { id: 6, title: 'Resolved Tickets 6', color: '#00ff00'  },
  ];
  const [selected, setSelected] = React.useState(1);
  const handleColor = () => {
    setSelected((selected % lists.length) + 1);
  };

  return (
    <View style={styles.container}>
      <View style={{ flexDirection: 'row', marginTop: 10 }}>
        {lists
          .filter((item, index) => index === selected - 1)
          .map((list, index) => {
            return (
              <Pressable
                onPress={() => {
                  handleColor();
                }}>
                <Text style={{color: list.color}}>{list.title}</Text>
              </Pressable>
            );
          })
          .filter(Boolean)}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});