ScrollView不滚动(React Native)

时间:2018-10-26 13:25:31

标签: javascript reactjs react-native scrollview

嘿,我一直在谷歌搜索,试图弄清楚为什么我的scrollview不能滚动并且我毫无头绪。我无法滚动滚动视图。同样,无论我无法单击滚动视图中卡片上的任何按钮,都是如此。知道我的代码怎么了吗?不管我做什么,我都无法滚动该东西,而我现在真的不知道。任何输入将不胜感激。

  <View
    onStartShouldSetResponder={() => Keyboard.dismiss()}
    style={{ flex: 1, backgroundColor: "white" }}
  >
    <View
      style={{
        backgroundColor: "#2C71B8",
        paddingTop: 90,
        position: "relative"
      }}
    >
      <Text
        style={{
          fontSize: 36,
          color: "white",
          fontWeight: "bold",
          justifyContent: "center",
          textAlign: "center",
          marginBottom: "20%",
          marginRight: "35%"
        }}
      >
        Find Room
      </Text>
    </View>
    <Autocomplete
      data={this.state.filteredRoom.map((value, index) => value)}
      defaultValue={query}
      autoCapitalize="none"
      placeholder="Enter a conference room name"
      autoCorrect={false}
      listContainerStyle={{ marginLeft: 20, marginRight: 20 }}
      listStyle={{
        borderColor: "#2F2449",
        backgroundColor: "#F5FCFF"
      }}
      containerStyle={styles.autocompleteContainer}
      inputContainerStyle={{ borderWidth: 0 }}
      style={styles.autoCompleteStyle}
      hideResults={true}
      onBlur={() => this.setState({ hideResults: true })}
      onFocus={() => this.setState({ hideResults: false })}
      onChangeText={text => this.filterRooms(text)}
      renderItem={item => {
        // console.log(item.buildingFloor.floorImage);
        return (
          <TouchableOpacity
            onPress={() => {
              this.setState({
                query: item.name,
                hideResults: true,
                ddPress: true,
                room: item,
                mapImageState: item.buildingFloor.floorImage
              });
              Keyboard.dismiss();
              this.setState({ xCoordinate: item.x, yCoordinate: item.y });
              // Check is user state is !null
            }}
          >
            <Text
              style={{
                marginTop: 5,
                paddingLeft: 10,
                fontSize: 14
              }}
            >{`${item.name} ${item.buildingFloor.building.name}`}</Text>
          </TouchableOpacity>
        );
      }}
    />
      <View style={styles.descriptionContainer}>
        <ScrollView style={{flex: 1}}>

        {this.state.filteredRoom.length > 0 && <this.RoomRender />}
      </ScrollView>

      </View>

  </View>

ROOMRENDER

RoomRender = () => {

        const containerWidth = this.state.screenWidth * 0.9;
        return (
          <View>
            <View style={{ marginTop: 50, marginRight: "50%" }}>
              <Text>{`Search Results(${this.state.filteredRoom.length})`}</Text>
            </View >
                {this.state.filteredRoom.map((value, index) => (
                  <RoomCard key={Math.random()} rooms={value} />
                ))}
          </View>
        );
      };

CSS

  descriptionContainer: {
    backgroundColor: "pink",
    justifyContent: "center",
    flex: 1,
    alignItems: "center"
  },

0 个答案:

没有答案