Question

我创建了一个动态网格，没有onPress函数就可以正常工作，但是当添加onPress函数时，布局会更改。前两行标签未呈现。

为什么会这样？我只需要在单元格上添加点击功能。

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  View,
  ListView,
  Image,
  ScrollView,
  Dimensions,
  FlatList,
  TouchableOpacity,
} from 'react-native';
import {
  Container,
  Header,
  Content,
  Button,
  Text,
  Icon,
  CardItem,
  Body,
  Card,
  ListItem,
  CheckBox,
  Separator,
  List,
  Title,
  Subtitle,
} from 'native-base';
import { RkGallery } from 'react-native-ui-kitten';
import { Form, Item, Input, Label, Left, Right } from 'native-base';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { api } from '../AllViewController/constant';
import ObjOnboardScreen from 'react-native-onboarding-swiper';

const dataSource = new ListView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2,
  sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
});

export default class FlatlistHorizontal extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [
        { id: '7' },
        { id: '8' },
        { id: '9' },
        { id: '10' },
        { id: '11' },
        { id: '12' },
        { id: '13' },
        { id: '14' },
        { id: '15' },
        { id: '16' },
        { id: '17' },
        { id: '18' },
        { id: '19' },
        { id: '20' },
        { id: '21' },
        { id: '22' },
        { id: '23' },
        { id: '24' },
        { id: '25' },
        { id: '26' },
        { id: '27' },
        { id: '28' },
        { id: '29' },
        { id: '30' },
        { id: '31' },
        { id: '32' },
        { id: '33' },
        { id: '34' },
        { id: '35' },
        { id: '36' },
        { id: '37' },
        { id: '38' },
        { id: '39' },
        { id: '40' },
        { id: '42' },
        { id: '42' },
        { id: '43' },
        { id: '44' },
        { id: '45' },
        { id: '46' },
        { id: '47' },
        { id: '48' },
        { id: '49' },
        { id: '50' },
        { id: '51' },
        { id: '52' },
        { id: '53' },
        { id: '54' },
        { id: '55' },
        { id: '56' },
        { id: '57' },
        { id: '58' },
        { id: '59' },
        { id: '60' },
        { id: '61' },
        { id: '62' },
        { id: '63' },
        { id: '64' },
        { id: '65' },
        { id: '66' },
      ],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false,
      isBoyOrGirl: true, //..... true girl , false boy
    };
    this.gotoBack = this.gotoBack.bind(this);
    this.RefreshList = this.RefreshList.bind(this);
    this.didselectoncell = this.didselectoncell.bind(this);
  }

  RefreshList = () => {
    if (this.state.isBoyOrGirl == true) {
      this.setState({ isBoyOrGirl: false });
    } else {
      this.setState({ isBoyOrGirl: true });
    }
    //console.log("1............",this.state.refreshing)
    this.setState({ refreshing: true });
    setTimeout(this.timerfunction, 100);
  };

  timerfunction = () => {
    this.setState({ refreshing: false });
  };

  gotoBack = () => {
    this.props.navigation.goBack(null);
  };

  didselectoncell = e => {
    alert(e);
  };

  render() {
    let boyURL = require('../girlboyasset/boy.png');
    let girlURl = require('../girlboyasset/girl.png');

    let screenwidth = Dimensions.get('window').width;
    let screenheight = Dimensions.get('window').height;
    let imageURL = 'https://randomuser.me/api/portraits/';

    let finalbuttonIMG = girlURl;
    let partofURL = 'women/';
    if (this.state.isBoyOrGirl == false) {
      finalbuttonIMG = boyURL;
      partofURL = 'men/';
    }
    return (
      <Container>
        <Header style={styles.navigationColor}>
          <Left>
            <Button transparent onPress={this.gotoBack}>
              <Image source={require('../assets/leftarrow.png')} />
            </Button>
          </Left>
          <Body>
            <Title>Flat List </Title>
            <Subtitle style={{ color: '#282828' }}>onboarding-swiper</Subtitle>
          </Body>
          <Right>
            <Button transparent onPress={this.RefreshList}>
              <Image source={finalbuttonIMG} />
            </Button>
          </Right>
        </Header>
        <Content>
          {/* <List> */}
          <FlatList
            data={this.state.data}
            numColumns={3}
            itemWidth={400}
            renderItem={({ item }) => (
              <View
                style={{
                  flex: 1,
                  margin: 5,
                  backgroundColor: '#ddd',
                  borderColor: '#000000',
                  borderWidth: 1,
                  height: 130,
                }}>
                <Grid onPress={() => this.didselectoncell(item.id)}>
                  <Row style={{ height: '20%' }}>
                    <Text>name:{item.id}</Text>
                  </Row>
                  <Row style={{ height: '20%' }}>
                    <Text style={{ textAlign: 'center', width: '100%' }}>
                      Image
                    </Text>
                  </Row>
                  <Row>
                    <Image
                      style={{
                        width: 70,
                        height: 70,
                        backgroundColor: '#000000',
                        marginLeft: 'auto',
                        marginRight: 'auto',
                      }}
                      source={{ uri: imageURL + partofURL + item.id + '.jpg' }}
                    />
                  </Row>
                </Grid>
              </View>
            )}
            refreshing={this.state.refreshing}
          />
          {/* </List> */}
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  navigationColor: {
    backgroundColor: api.kNavigationBarColor,
  },
});

唯一的问题是这一行。

<Grid onPress={() => this.didselectoncell(item.id)}>

我已附上问题的图像。 [ not rendering properly[1]

Answer 1

这是我的解决方法，因此可以将 onPress 函数放置在 Grid 上，而不必替换其父 {{ 1}} 和 View ，然后在其中放置 TouchableOpacity 功能，

onPress

您可以尝试这种小吃here

关于发生这种情况的原因，我认为这是因为<TouchableOpacity onPress={() => this.didselectoncell(item.id)} style={{ flex: 1, margin: 5, backgroundColor: '#ddd', borderColor: '#000000', borderWidth: 1, height: 130 }}> <Grid> ... </Grid> </TouchableOpacity> onPress Touchable确实很奇怪。

当在Grid react-native-easy-grid中添加onPress函数时，布局发生了变化

1 个答案: