0
598
VistasCómo espaciar elementos en React o React Native
Estoy tratando de espaciar mis componentes, sin embargo, tengo problemas. Me gustaría que mi cuadrícula ocupe el 90 % de la pantalla y el ícono de ajustes ocupe el 10 %
<View style={{ paddingLeft: insets.left, paddingRight: insets.right, flex: 1, flexDirection: 'row', }} onLayout={event => { _handleWorkSpace(event); }}> <StatusBar hidden={true} /> <View style={{flex: 1}}> <FlatGrid itemDimension={96} // maxDimension={128} data={items} style={styles.gridView} // staticDimension={{width: 128, height: 128}} fixed spacing={10} renderItem={({item}) => ( <View onLayout={event => { var {x, y, width, height} = event.nativeEvent.layout; console.log(width, height); }} style={[styles.itemContainer, {backgroundColor: item.code}]}> <Text style={styles.itemName}>{item.name}</Text> <Text style={styles.itemCode}>{item.code}</Text> </View> )} /> </View> <View style={{flex: 1}}> <Icon name="settings" size={30} /> </View> </View> Lo que tengo 
lo que estoy esperando 
Pude obtener el aspecto, pero tuve que cambiar el valor de flexión de la cuadrícula a 12. Sé que no es la forma correcta, así que estoy tratando de averiguar cómo hacerlo.
3 Respuestas
Responde la pregunta0
Pones flex: 1 en ambas View , esto significa que ambas intentarán ocupar el 50% del espacio (1+1). Si quieres que uno tome el 90% y el otro el 10%, uno necesitará flex: 9 y el otro flex: 1 .
Simplemente cambie los valores de flexión:
<View style={{flex: 9}}> <FlatGrid ... /> </View> <View style={{flex: 1}}> <Icon name="settings" size={30} /> </View> Para tratar de hacerlo más claro: imagine que la suma de los valores de flex en el mismo nivel es 100%. Como tenía 2 flex: 1 , 1+1=2=100%, entonces 1=50%.
Al hacer el cambio que sugerí ( flex: 9 y flex: 1 ) puedes pensarlo como 9+1=10=100%, entonces 9=90% y 1=10%.
0
const {width} = Dimensions.get('window'); <View style={{ paddingLeft: insets.left, paddingRight: insets.right, flex: 1, flexDirection: 'row', }} onLayout={event => { _handleWorkSpace(event); }}> <StatusBar hidden={true} /> <View style={{width : 0.9*width}}> <FlatGrid itemDimension={96} // maxDimension={128} data={items} style={styles.gridView} // staticDimension={{width: 128, height: 128}} fixed spacing={10} renderItem={({item}) => ( <View onLayout={event => { var {x, y, width, height} = event.nativeEvent.layout; console.log(width, height); }} style={[styles.itemContainer, {backgroundColor: item.code}]}> <Text style={styles.itemName}>{item.name}</Text> <Text style={styles.itemCode}>{item.code}</Text> </View> )} /> </View> <View style={{width : 0.1*width}}> <Icon name="settings" size={30} /> </View> </View>intente esto, no se olvide de importar las Dimensiones desde el costo de uso nativo de reacción {ancho} = Dimensiones .... fuera de la declaración de devolución.
0
Puede configurar su icono de engranaje como un elemento absolute :
<View style={styles.grid}> <Octicons name="gear" size={iconSize} color="black" style={styles.icon} /> <FlatGrid itemDimension={130} data={items} style={styles.gridView} spacing={10} renderItem={({ item }) => ( <View style={[styles.itemContainer, { backgroundColor: item.code }]}> <Text style={styles.itemName}>{item.name}</Text> <Text style={styles.itemCode}>{item.code}</Text> </View> )} /> </View>con los siguientes estilos:
grid: { alignSelf: 'center', width: width * 0.9, }, icon: { position: 'absolute', right: -iconSize, top: 0, }Aquí hay un bocadillo de trabajo: https://snack.expo.dev/@hristoeftimov/absolute-icon