Question

嘿那里我使用React Navigation作为我的Bottom Tabbar菜单，我有3个标签，其中2个第一个标签有一个小内容视图，最后一个标签稍微大一些，在一个sectionlist中加载了200个项目。但是当我打开第3个标签时，屏幕快速加载，但是从那里开始，每次触摸都会很慢。即使我回到其他2个选项卡...通过其他选项卡导航的响应只是有时慢，导航需要2秒钟。

这是屏幕代码：

＆＃13;

            <View style={styles.fill}>

            <Animated.ScrollView style={styles.fill} scrollEventThrottle={1} onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }], { useNativeDriver: true } )}
                refreshControl={

                  <RefreshControl refreshing={this.state.refreshing} onRefresh={() => {
                    this.setState({ refreshing: true });
                    setTimeout(() => this.setState({ refreshing: false }), 1000);
                  }} progressViewOffset={HEADER_MAX_HEIGHT}  />

                } contentInset={{top: HEADER_MAX_HEIGHT}} contentOffset={{y: -HEADER_MAX_HEIGHT}}>

            <View style={{backgroundColor:"#f6ae1b",marginTop:300}} >
            <TouchableNativeFeedback>
            <LinearGradient colors={['rgba(0, 0, 0,0)', 'rgba(0, 0, 0,0.2)', 'rgba(0, 0, 0,0.4)']} style={{padding:15,justifyContent:'center',alignItems: 'center'}} >
            <Text>Closed</Text>
            </LinearGradient>
            </TouchableNativeFeedback>
            </View>
            <SectionList style={{height:null,paddingBottom:40}} ref={ref => (this.sectionListRef = ref)} sections={filteredEmail}  renderSectionHeader={this.renderSection} renderItem={this.renderItem}/>
          </Animated.ScrollView>


          <Animated.View pointerEvents="none"style={[styles.header,{ transform: [{ translateY: headerTranslate }]}]}>
            <Animated.View style={[styles.backgroundImage, { opacity: imageOpacity,transform: [{ translateY: imageTranslate }]}]}>
              <ImageBackground style={{width:width,height:300,backgroundColor:'#000'}} source={{uri: 'http://www.tokkoro.com/picsup/2029425-blur-coffee-shop-or-cafe-restaurant-with-abstract-bokeh-light-image.jpg'}}>
                <LinearGradient colors={['rgba(0, 0, 0,0.9)','rgba(0, 0, 0,0.4)','rgba(0, 0, 0,0)', 'rgba(0, 0, 0,0.4)', 'rgba(0, 0, 0,0.9)']} style={styles.contentContainer}>

                <View style={{flexDirection:'row',position:'absolute',bottom:0,width:width,justifyContent:'center',alignItems: 'center'}}>
                  <TouchableNativeFeedback>
                  <View style={{flex:1,paddingLeft:10,paddingTop:10,paddingBottom:12}}>
                    <Icon name="ios-cart-outline" size={30} style={{color:'#fff',opacity:0.7}} />
                    <Text style={{color:'#fff',opacity:0.7}}>Min.Order</Text>
                    <Text style={{color:'#fff',fontSize:18}}>&euro; 5.00</Text>
                  </View>
                  </TouchableNativeFeedback>
                  <View style={{flex:1,borderColor:'#fff',borderLeftWidth:1,paddingLeft:10,paddingTop:10,paddingBottom:12}}>
                    <Icon name="ios-bicycle-outline" size={30} style={{color:'#fff',opacity:0.7}} />
                    <Text style={{color:'#fff',opacity:0.7}}>Order</Text>
                    <Text style={{color:'#fff',fontSize:18}}>&euro; 5.00</Text>
                  </View>
                  <View style={{flex:1,borderColor:'#fff',borderLeftWidth:1,paddingLeft:10,paddingTop:10,paddingBottom:12}}>
                    <Icon name="ios-timer-outline" size={30} style={{color:'#fff',opacity:0.7}} />
                    <Text style={{color:'#fff',opacity:0.7}}>Ordertime</Text>
                    <Text style={{color:'#fff',fontSize:18}}>45 Min.</Text>
                  </View>
                </View>

                </LinearGradient>
              </ImageBackground>
            </Animated.View>
          </Animated.View>

          <Animated.View style={[styles.bar,{opacity:titleOpacity,transform: [ { translateY: titleTranslate }]}]}>
          <SearchInput onChangeText={(term) => { this.searchUpdated(term) }} placeholder="Type a message to search"/>
          </Animated.View>


          <Modal isVisible={this.state.isModalVisible}  onSwipe={() => this.setState({ isModalVisible: false })}  swipeDirection="left" backdropColor={"rgba(0,0,0,0.7)"} backdropOpacity={1} animationIn="slideInUp">
            <View style={{backgroundColor:'#fff',width:width-20}}>
            <View style={{paddingTop:20,paddingBottom:20,paddingLeft:14,paddingRight:14,backgroundColor:'#eee'}}>
            <Text style={{fontSize:16,fontWeight:'bold'}}>Title...</Text>
            </View>
            <Text>laden...</Text>
            <View style={{paddingTop:20,paddingBottom:20,paddingLeft:14,paddingRight:14,backgroundColor:'#eee'}}>
            <TouchableNativeFeedback onPress={() => this._toggleModal(false)} >
            <Text style={{color:'black'}}>Add</Text>
            </TouchableNativeFeedback>
            </View>
            </View>
          </Modal>

          <MessageBarAlert ref="alert" />
          </View>

＆＃13;

我搜索了很多优化提示和trics，但到目前为止没有什么可以帮助我。

顺便说一句：应用内部的滚动非常完美，只有触摸响应很慢。

反应原生一个场景减慢整个应用程序

0 个答案: