Question

我的React Native移动应用程序的主页有问题。

当我尝试滚动主页时，不是滚动所有页面，而是FlatList滚动，而是滚动在他的容器中，而不是滚动所有页面。

我尝试了一些修复程序，但无法像flex：1 ...

一样工作

renderItem = ({item}) => (
    <TouchableOpacity 
      style={styles.listItem} 
      onPress={() => this.props.navigation.navigate("SingleProduct", { product: item })}
    >
      <View style={styles.view}>
        {/* <Image style={styles.image} source={{ uri: item.images[0].src }}></Image>
        <Text style={styles.text}>{item.name}</Text>
        <Text style={styles.text}>{item.price}</Text>
        <Text style={styles.text}>{item.seller}</Text> */}
        <View style = {styles.ImageProductContainer}>
          <Image style={styles.imageproduct} source={{ uri: item.images[0].src }}></Image>
        </View>
        <Text style={[styles.text, styles.productName]}>{item.name}</Text>
        {
          item.tags.length > 0 ?
          <Text style={[styles.text, styles.italic]}>Boutique : {item.tags[0].name}</Text>
          :
          <Text style={[styles.text, styles.italic]}>Boutique : Julien</Text>
        }
        <Text style={[styles.text, styles.price]}>{item.price}€</Text>
      </View>
    </TouchableOpacity>
  )

  render() {
    return (
      <View style={styles.container}>
        {
          this.state.products.length && !this.state.loading ?
          <View style={styles.getStartedContainer}>
            <Text style={styles.title}>
              <Text style={styles.dot}>•</Text> Petites Trouvailles <Text style={styles.dot}>•</Text>
            </Text>
            <ImageBackground style={[styles.imagecontainerbg]} source={require('../assets/images/slider.png')}>
              <Text style={[styles.textslideone]}>
                {'Nos créateurs'.toUpperCase()}
                {"\n"}
                <Text style={[styles.textslideonetitle]}>Zizi Jeanmaire</Text>
              </Text>
              <TouchableOpacity onPress={this.userLogout}>
                <Text style={[styles.textslidetwo]}>Voir les trouvailles</Text>
              </TouchableOpacity>
            </ImageBackground>
            <Text style={styles.title}>
              Toutes les trouvailles
            </Text>
            <Text style={[styles.titletwo,styles.marginbottomtitle]}>
              A découvrir sans attendre près de chez vous
            </Text>
            <FlatList
              contentContainerStyle={styles.list} 
              numColumns={2}
              data={this.state.products}
              keyExtractor={ item => item.id.toString() }
              renderItem={this.renderItem}
            />
          </View>
          :
          <View style={styles.loaderContainer}>
            <Image
              source={ require('../assets/images/cart-loading.gif') }
              style={styles.loaderImage}
            />
          </View>
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
    backgroundColor: '#f6f6f6',
  },
  title: {
    textAlign: 'center',
    fontFamily: 'pacifico', 
    fontSize: 28,
    color: '#333333',
  },
  dot: {
    color: '#eeabcc'
  },
  welcomeContainer: {
    alignItems: 'center',
  },
  getStartedContainer: {
    alignItems: 'center', 
    justifyContent: 'center',
    flexDirection: 'column'
  },
  list: {
    alignItems: 'center', 
    justifyContent: 'center',
    flexDirection: 'column'
  },
  listItem: {
    width: '50%'
  },
  view: {
    padding: 10,
    alignItems: 'center', 
    justifyContent: 'center',
    flexDirection: 'column'
  },
  ImageProductContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF8E1',
  },
  imageproduct: {
    width: 100, 
    height: 100,
    borderWidth: 1,
    borderColor: '#F44336'
  },
  text: {
    textAlign: 'center',
    fontSize: 16,
  },
  productName: {
    color: '#333333',
    fontSize: 20,
    fontFamily: 'pacifico'
  },
  imagecontainerbg: {
    flex: 1,
    marginTop: 30,
    marginBottom: 30,
    justifyContent: 'center',
    width: '100%', 
    height: 300
  },
  textslideone: {
    textAlign: 'center',
    alignSelf:'center',
    fontSize: 16,
    padding: 5,
    backgroundColor: "white",
    color: "black",
    width: 220,
    borderRadius: 10
  },
  textslideonetitle: {
    paddingBottom: 10,
    textAlign: 'center',
    fontFamily: 'pacifico', 
    fontSize: 28,
    color: '#333333'
  },
  marginbottomtitle: {
    marginBottom: 30
  },
  textslidetwo: {
    textAlign: 'center',
    alignSelf:'center',
    fontSize: 14,
    padding: 5,
    backgroundColor: "#eeabcc",
    color: "white",
    width: 220,
    borderRadius: 10
  },
  bold: {
    fontWeight: 'bold'
  },
  italic: {
    fontStyle: 'italic'
  },
  price: {
    color: '#eeabcc',
    fontSize: 34,
    fontFamily: 'pacifico'
  },
  loaderContainer: {
    alignItems: 'center', 
    justifyContent: 'center',
    flexDirection: 'column'
  },
  loaderImage: {
    width: 200,
    height: 200,
  },
});

enter image description here

有人可以帮助我吗？

谢谢。

Answer 1

代替flex: 1

使用：

<FlatList
    contentContainerStyle={{ flexGrow: 1 }}
    {...otherProps}
/>

Answer 2

使用ScrollView，使屏幕可滚动。

render() {
  return (
    <ScrollView>
      <View style={styles.container}>
        {this.state.products.length && !this.state.loading ? (
          <View style={styles.getStartedContainer}>
            <Text style={styles.title}>
              <Text style={styles.dot}>•</Text> Petites Trouvailles{' '}
              <Text style={styles.dot}>•</Text>
            </Text>
            <ImageBackground
              style={[styles.imagecontainerbg]}
              source={require('../assets/images/slider.png')}
            >
              <Text style={[styles.textslideone]}>
                {'Nos créateurs'.toUpperCase()}
                {'\n'}
                <Text style={[styles.textslideonetitle]}>Zizi Jeanmaire</Text>
              </Text>
              <TouchableOpacity onPress={this.userLogout}>
                <Text style={[styles.textslidetwo]}>Voir les trouvailles</Text>
              </TouchableOpacity>
            </ImageBackground>
            <Text style={styles.title}>Toutes les trouvailles</Text>
            <Text style={[styles.titletwo, styles.marginbottomtitle]}>
              A découvrir sans attendre près de chez vous
            </Text>
            <FlatList
              contentContainerStyle={styles.list}
              numColumns={2}
              data={this.state.products}
              keyExtractor={item => item.id.toString()}
              renderItem={this.renderItem}
            />
          </View>
        ) : (
          <View style={styles.loaderContainer}>
            <Image
              source={require('../assets/images/cart-loading.gif')}
              style={styles.loaderImage}
            />
          </View>
        )}
      </View>
    </ScrollView>
  );
}

FlatList和页面滚动问题，如何解决？

2 个答案: