No puedo diseñar mi casilla de verificación como alignSelf: 'flex-end' o right: 0.

Quiero poner la casilla de verificación arriba y derecha, pero hay un relleno extraño en la foto. Probé muchos estilos diferentes pero ninguno de ellos funciona. :(

enter image description here

Este es el renderItem () de FlatList

    <TouchableWithoutFeedback
       style={{flex:1}}
      onPress={() => this._handleImagePress(item.id, item.outfit_img)}>
      <View style={{flex: 1}}>
        <Image
          key={item.id}
          source={{uri: item.outfit_img}}
          style={styles.rowImage}
          resizeMode="cover"
        />
        <CheckBox checked={isSelected} style={{marginLeft:2, marginTop:2, position:'absolute', alignSelf: 'flex-end'}}/>
      </View>
    </TouchableWithoutFeedback>

Aquí está la función FlatList

  render() {
    return (
      <View style={styles.root}>
        <FlatList
          data={this.props.outfits}
          extraData={this.state.selectedStyles}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
          numColumns={3}
          renderHeader={this._renderHeader}/>
      </View>
    );
  }

ARREGLO DE ACTUALIZACIÓN Creo que Native-Base Checkbox es terrible en cuanto a estilo. Esta es la versión de trabajo. ¿Alguna optimización? o mejor opción?

<TouchableWithoutFeedback
       style={{flex:1}}
      onPress={() => this._handleImagePress(item.id, item.outfit_img)}>
      <View style={styles.rowImage}>
        <Image
          key={item.id}
          source={{uri: item.outfit_img}}
          style={styles.rowImage}
          resizeMode="cover"
        />
        <View style={{height:32, width:32, position:'absolute', top:0, right:0, marginTop:4, paddingRight:12}}>
          <CheckBox checked={isSelected} color="#f64e59"/>
        </View>
      </View>
    </TouchableWithoutFeedback>
0
hellofanengineer 30 oct. 2017 a las 17:44

3 respuestas

La mejor respuesta

He creado una merienda aquí https://snack.expo.io/HJYNoAEAW, espero que esté esperando Este comportamiento.

1
Shubhnik Singh 30 oct. 2017 a las 17:04

Los elementos secundarios del contenedor flexible ya no son elementos flexibles y, por lo tanto, no obedecen las propiedades de alineación flexible (align-* y justify-*). obedecen a palabras clave de desplazamiento (left, right, etc.), pero estos desplazamientos se calculan relativamente al ancestro posicionado más cercano (o, si no hay ninguno, al elemento raíz). Intente agregar position:'relative' al atributo style de su elemento TouchableWithoutFeedback para convertirlo en el ancestro posicionado más cercano de la casilla de verificación, para que pueda posicionarse relativamente a él.

1
Ilya Streltsyn 30 oct. 2017 a las 15:26

Elimine position: absolute del CheckBox y agregue justify-content: space-between al elemento primario del elemento.

0
Ahmed Abdulrahman 30 oct. 2017 a las 14:54