React native 从react native中的3个按钮中选择一个按钮_React Native

React native 从react native中的3个按钮中选择一个按钮

react-native

React native 从react native中的3个按钮中选择一个按钮,react-native,React Native,我有三个按钮，分别是药丸、糖浆和注射器。用户必须从这3个按钮中选择一个按钮。若用户选择糖浆，则注射器和药丸必须返回false。这类似于切换按钮的概念。请分享您的想法或任何链接以供参考下面是我的单切换按钮文件 Priscription.js <SelectDeselectButton iconName={'briefcase-medical'} iconFamily={"FontAwesome5"} iconBgColor={COLO

我有三个按钮，分别是药丸、糖浆和注射器。用户必须从这3个按钮中选择一个按钮。若用户选择糖浆，则注射器和药丸必须返回false。这类似于切换按钮的概念。请分享您的想法或任何链接以供参考

下面是我的单切换按钮文件

Priscription.js

   <SelectDeselectButton
     iconName={'briefcase-medical'}
     iconFamily={"FontAwesome5"}
     iconBgColor={COLOR_WHITE}
     iconColor={COLOR_BLACK}
     selectedColor={COLOR_ORANGE}
     iconSize={30}
     initialSelection={isButtonSelected}
     onClickEvent={(item) => setIsButtonSelected(item)}
     />

   import React, { useState } from 'react';
   import { StyleSheet } from 'react-native'
   import {  View, Button, Icon } from "native-base";

   //RESPONSIVE
   import { useScreenDimensions } from '../../ORIENTATION/useOrientation'
   import { normalize } from '../../ORIENTATION/FontScale'
   import { COLOR_WHITE } from '../Constants/Colors'
   const SelectDeselectButton = ({iconName, iconBgColor, iconColor, iconFamily, iconSize, 
   selectedColor, onClickEvent, initialSelection}) =>
   {
   const screenData = useScreenDimensions();
   const screenWidth = screenData.width;
   const screenHeight = screenData.height;

   const [isSelected, setIsSelected] = useState(initialSelection);
   const styles = StyleSheet.create({

   button:
   {
    width: screenWidth > screenHeight ? screenHeight / 4.5 : screenWidth / 3.5,
    height: screenWidth > screenHeight ? '50%' : '42%',
    backgroundColor: isSelected ? selectedColor : iconBgColor,
    shadowOpacity: 0.25,
    shadowRadius: 5,
    shadowColor: 'gray',
    shadowOffset: { height: 0, width: 0 },
    elevation: 1,
    justifyContent:'center',
    alignItems:'center'
   },
   icon:
   {
    fontSize:screenWidth > screenHeight ? normalize(iconSize) : normalize(iconSize+8),
    color: isSelected ? COLOR_WHITE : iconColor,
   }
   })

   const buttonHandler = () =>
   {
    setIsSelected(!isSelected);
    if(onClickEvent !== null)
    onClickEvent(isSelected);
   }

   return(
    <View>
       <Button rounded style={styles.button} onPress={() => buttonHandler()}>
            <Icon name={iconName} style={styles.icon} type={iconFamily}/>
      </Button>
    </View>
   )
   }


   export default SelectDeselectButton;

import ToggleButton from './ToggleButton'

...
   const [isSelected, setIsSelected] = useState('');   
   <ToggleButton type = 'Syringe' isSelected = {isSelected} setIsSelected={setIsSelected}/>
   <ToggleButton type = 'Pill' isSelected = {isSelected} setIsSelected={setIsSelected}/>
   <ToggleButton type = 'Syrup' isSelected = {isSelected} setIsSelected={setIsSelected}/>

setIsButtonSelected（项）}
/>

ToggleButton.js

   <SelectDeselectButton
     iconName={'briefcase-medical'}
     iconFamily={"FontAwesome5"}
     iconBgColor={COLOR_WHITE}
     iconColor={COLOR_BLACK}
     selectedColor={COLOR_ORANGE}
     iconSize={30}
     initialSelection={isButtonSelected}
     onClickEvent={(item) => setIsButtonSelected(item)}
     />

   import React, { useState } from 'react';
   import { StyleSheet } from 'react-native'
   import {  View, Button, Icon } from "native-base";

   //RESPONSIVE
   import { useScreenDimensions } from '../../ORIENTATION/useOrientation'
   import { normalize } from '../../ORIENTATION/FontScale'
   import { COLOR_WHITE } from '../Constants/Colors'
   const SelectDeselectButton = ({iconName, iconBgColor, iconColor, iconFamily, iconSize, 
   selectedColor, onClickEvent, initialSelection}) =>
   {
   const screenData = useScreenDimensions();
   const screenWidth = screenData.width;
   const screenHeight = screenData.height;

   const [isSelected, setIsSelected] = useState(initialSelection);
   const styles = StyleSheet.create({

   button:
   {
    width: screenWidth > screenHeight ? screenHeight / 4.5 : screenWidth / 3.5,
    height: screenWidth > screenHeight ? '50%' : '42%',
    backgroundColor: isSelected ? selectedColor : iconBgColor,
    shadowOpacity: 0.25,
    shadowRadius: 5,
    shadowColor: 'gray',
    shadowOffset: { height: 0, width: 0 },
    elevation: 1,
    justifyContent:'center',
    alignItems:'center'
   },
   icon:
   {
    fontSize:screenWidth > screenHeight ? normalize(iconSize) : normalize(iconSize+8),
    color: isSelected ? COLOR_WHITE : iconColor,
   }
   })

   const buttonHandler = () =>
   {
    setIsSelected(!isSelected);
    if(onClickEvent !== null)
    onClickEvent(isSelected);
   }

   return(
    <View>
       <Button rounded style={styles.button} onPress={() => buttonHandler()}>
            <Icon name={iconName} style={styles.icon} type={iconFamily}/>
      </Button>
    </View>
   )
   }


   export default SelectDeselectButton;

import ToggleButton from './ToggleButton'

...
   const [isSelected, setIsSelected] = useState('');   
   <ToggleButton type = 'Syringe' isSelected = {isSelected} setIsSelected={setIsSelected}/>
   <ToggleButton type = 'Pill' isSelected = {isSelected} setIsSelected={setIsSelected}/>
   <ToggleButton type = 'Syrup' isSelected = {isSelected} setIsSelected={setIsSelected}/>

import React，{useState}来自“React”；
从“react native”导入{StyleSheet}
从“本机基础”导入{视图、按钮、图标}；
//响应的
从“../../ORIENTATION/useOrientation”导入{useScreenDimensions}
从“../../ORIENTATION/FontScale”导入{normalize}
从“../Constants/Colors”导入{COLOR\u WHITE}
const selectDecelosebutton=（{iconName，IConBColor，iconColor，iconFamily，iconSize，
selectedColor、onClickEvent、initialSelection}）=>
{
常量screenData=useScreenDimensions（）；
const screenWidth=screenData.width；
const screenHeight=screenData.height；
const[isSelected，setIsSelected]=useState（初始选择）；
const styles=StyleSheet.create({
按钮：
{
宽度：屏幕宽度>屏幕高度？屏幕高度/4.5:screenWidth/3.5，
高度：屏幕宽度>屏幕高度？'50%：'42%，
背景颜色：isSelected？Selected颜色：iconBgColor，
阴影不透明度：0.25，
阴影半径：5，
阴影颜色：“灰色”，
阴影偏移：{高度：0，宽度：0}，
立面图：1，
辩护内容：'中心'，
对齐项目：'center'
},
偶像：
{
fontSize:screenWidth>screenHeight？规格化（iconSize）：规格化（iconSize+8），
颜色：isSelected？颜色\白色：iconColor，
}
})
常量按钮句柄=（）=>
{
setIsSelected（！isSelected）；
if（onClickEvent！==null）
OnClick事件（isSelected）；
}
返回(
buttonHandler（）}>
)
}
导出默认选择按钮；

提前感谢。

将按钮名设置为字符串，而不是将

选为布尔值。然后，您只需要与按钮名称进行比较，以检查它是否已选中
Toggle Button.js//为了简单起见，我更改了组件
const toggleButton = (type) => {
  const buttonHandler = () =>
   {
    setIsSelected(type);
    if(onClickEvent !== null)
    onClickEvent(isSelected);
   }

   return(
     <View>
       <Button rounded style={isSelected === type ? styles.activeButton : styles.button} onPress={() => buttonHandler()}>
            <Icon name={iconName} style={styles.icon} type={iconFamily}/>
      </Button>
    </View>
   )
   }
}


const-toggleButton=（类型）=>{
常量按钮句柄=（）=>
{
setIsSelected（类型）；
if（onClickEvent！==null）
OnClick事件（isSelected）；
}
返回(
buttonHandler（）}>
)
}
}

Prescription.js
   <SelectDeselectButton
     iconName={'briefcase-medical'}
     iconFamily={"FontAwesome5"}
     iconBgColor={COLOR_WHITE}
     iconColor={COLOR_BLACK}
     selectedColor={COLOR_ORANGE}
     iconSize={30}
     initialSelection={isButtonSelected}
     onClickEvent={(item) => setIsButtonSelected(item)}
     />

   import React, { useState } from 'react';
   import { StyleSheet } from 'react-native'
   import {  View, Button, Icon } from "native-base";

   //RESPONSIVE
   import { useScreenDimensions } from '../../ORIENTATION/useOrientation'
   import { normalize } from '../../ORIENTATION/FontScale'
   import { COLOR_WHITE } from '../Constants/Colors'
   const SelectDeselectButton = ({iconName, iconBgColor, iconColor, iconFamily, iconSize, 
   selectedColor, onClickEvent, initialSelection}) =>
   {
   const screenData = useScreenDimensions();
   const screenWidth = screenData.width;
   const screenHeight = screenData.height;

   const [isSelected, setIsSelected] = useState(initialSelection);
   const styles = StyleSheet.create({

   button:
   {
    width: screenWidth > screenHeight ? screenHeight / 4.5 : screenWidth / 3.5,
    height: screenWidth > screenHeight ? '50%' : '42%',
    backgroundColor: isSelected ? selectedColor : iconBgColor,
    shadowOpacity: 0.25,
    shadowRadius: 5,
    shadowColor: 'gray',
    shadowOffset: { height: 0, width: 0 },
    elevation: 1,
    justifyContent:'center',
    alignItems:'center'
   },
   icon:
   {
    fontSize:screenWidth > screenHeight ? normalize(iconSize) : normalize(iconSize+8),
    color: isSelected ? COLOR_WHITE : iconColor,
   }
   })

   const buttonHandler = () =>
   {
    setIsSelected(!isSelected);
    if(onClickEvent !== null)
    onClickEvent(isSelected);
   }

   return(
    <View>
       <Button rounded style={styles.button} onPress={() => buttonHandler()}>
            <Icon name={iconName} style={styles.icon} type={iconFamily}/>
      </Button>
    </View>
   )
   }


   export default SelectDeselectButton;

import ToggleButton from './ToggleButton'

...
   const [isSelected, setIsSelected] = useState('');   
   <ToggleButton type = 'Syringe' isSelected = {isSelected} setIsSelected={setIsSelected}/>
   <ToggleButton type = 'Pill' isSelected = {isSelected} setIsSelected={setIsSelected}/>
   <ToggleButton type = 'Syrup' isSelected = {isSelected} setIsSelected={setIsSelected}/>

import ToggleButton from./ToggleButton'
...
const[isSelected，setIsSelected]=useState（“”）；

我传递isSelected和处理程序的原因是，您要控制父组件中的状态，以便所有按钮使用相同的状态