Estoy creando una aplicación de calculadora para react-native y quiero representar un diseño diferente para los botones en modo horizontal y vertical, ¿cómo puedo hacerlo en un componente de función?
mi regreso:
return ( <View style={styles.container}> <View style={styles.resultContainer}> <Text style={styles.resultText}> {displayValue} </Text> </View> <View style={styles.inputContainer } > {renderButtons()} </View> </View> );y mi funcion RenderButtons
renderButtons = () =>{ height = Dimensions.get('window').height width = Dimensions.get('window').width if(height > width){ let layouts = buttons.map((buttonRows,index)=>{ let rowItem = buttonRows.map((buttonItems,buttonIndex)=>{ return <InputButton value={buttonItems} handleOnPress={handleInput.bind(buttonItems)} key={'btn-'+ buttonIndex}/> }); return <View style={styles.inputRow} key={'row-' + index}>{rowItem}</View> }); return layouts } else { let layouts = buttons_landscape.map((buttonRows,index)=>{ let rowItem = buttonRows.map((buttonItems,buttonIndex)=>{ return <InputButton value={buttonItems} handleOnPress={handleInput.bind(buttonItems)} key={'btn-'+ buttonIndex}/> }); return <View style={styles.inputRow} key={'row-' + index}>{rowItem}</View> }); return layouts } }por supuesto, la condición (alto> ancho) no funciona porque aparentemente los valores no están definidos, soy un poco nuevo en JS, así que no sean tan duros conmigo por no saber lo obvio
Puedes usar react-native-orientation-locker
import Orientation from 'react-native-orientation-locker'; _onOrientationDidChange = (orientation) => { if (orientation == 'LANDSCAPE-LEFT') { //do something with landscape left layout } else { //do something with portrait layout } }; componentWillMount() { //The getOrientation method is async. It happens sometimes that //you need the orientation at the moment the js starts running on device. //getInitialOrientation returns directly because its a constant set at the //beginning of the js code. var initial = Orientation.getInitialOrientation(); if (initial === 'PORTRAIT') { //do stuff } else { //do other stuff } }, componentDidMount() { Orientation.getAutoRotateState((rotationLock) => this.setState({rotationLock})); //this allows to check if the system autolock is enabled or not. Orientation.lockToPortrait(); //this will lock the view to Portrait //Orientation.lockToLandscapeLeft(); //this will lock the view to Landscape //Orientation.unlockAllOrientations(); //this will unlock the view to all Orientations //get current UI orientation /* Orientation.getOrientation((orientation)=> { console.log("Current UI Orientation: ", orientation); }); //get current device orientation Orientation.getDeviceOrientation((deviceOrientation)=> { console.log("Current Device Orientation: ", deviceOrientation); }); */ Orientation.addOrientationListener(this._onOrientationDidChange); }, componentWillUnmount: function() { Orientation.removeOrientationListener(this._onOrientationDidChange); }Otro enfoque puede ser Aquí
Puede usar esta biblioteca react-native-orientation
Ejemplo:
import Orientation from 'react-native-orientation'; const AppScreen = () => { // ... const [deviceOrientation, setDeviceOrientation] = React.useState(''); React.useEffect(() => { // The getOrientation method is async. It happens sometimes that // you need the orientation at the moment the JS runtime starts running on device. // `getInitialOrientation` returns directly because its a constant set at the // beginning of the JS runtime. // this locks the view to Portrait Mode Orientation.lockToPortrait(); // this locks the view to Landscape Mode // Orientation.lockToLandscape(); // this unlocks any previous locks to all Orientations // Orientation.unlockAllOrientations(); Orientation.addDeviceOrientationListener(handleChangeOrientation); return () => { Orientation.removeAllListeners(handleChangeOrientation); console.log('Bye see you soon ! 👋'); }; }, []); const handleChangeOrientation = orientation => { console.log(' Device orientation change to:', orientation); setDeviceOrientation(orientation); }; return ( <View style={{flex: 1}}> <Text>{deviceOrientation}</Text> </View> ); }; export default AppScreen;