[英]React Native View Wont Scroll
在我的應用程序中,我無法滾動我的view.i屏幕底部有我的文本和按鈕,但是我無法滾動我的view.is react native沒有任何默認的滾動效果嗎?
render() {
if(this.viewCaseData === true){
var caseList = <View >
<ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)}></ListView>
</View>
}else{
var caseList = <ScrollView ref='scrollView' contentContainerStyle={{flex:1}} style={{
marginLeft: 10,
marginRight: 10,
flex:1
}}>
<View>
<View style={{
marginBottom: 10,
flexDirection: 'column'
}}>
<View>
<TextField
label={'Search'}
highlightColor={'#DA4336'}
duration={10}
labelColor={'black'}
borderColor = {'#DA4336'}
onChangeText={(text) => this.setState({searchText: text})}
value = {this.state.searchText}
dense={true}
/>
</View>
<View >
<TouchableOpacity
onPress={this.loadCustomerData.bind(this)}
style={{
marginLeft: 320,
height: 30,
width: 30,
backgroundColor: '#DA4336'
}}>
<Text style={{
color: '#fff'
}}>Search</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Customer Category</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Customer Category Type</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Customer Code Type</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Customer Code</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>BranchLocation</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Title</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Full Name</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Initials</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Lastname</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Preferred Name</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>DateOf Birth</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Gender</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Mother Maiden Name</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Nationality</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Religon</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Marital Status</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Preferred Language</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Mobile01</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Mobile02</Text>
<Text style={styles.textDetail}>value</Text>
</View>
<View style={styles.seperator}/>
<View style={styles.textMainView}>
<Text style={styles.textLabel}>Email</Text>
<Text style={styles.textDetail}>value</Text>
</View>
</View>
</ScrollView>
}
return (
<View style={{flex:1}}>
<View style={styles.headerView}>
<View >
<View style={styles.circle}>
<Text style={{
fontSize: 40,
fontWeight: 'bold',
color: '#fff',
marginLeft: 18
}}>A</Text>
</View>
<Text style={{
fontSize: 18,
color: '#fff',
marginLeft: 15,
marginTop: 5,
marginBottom: 20
}}>User Name</Text>
</View>
<View style={styles.headerButtonMain}>
<View style={styles.headerButton}>
<TouchableOpacity style={{
marginRight: 25
}}
onPress={this.loadListData.bind(this)}
>
<Image style={styles.button} source={require('./img/imgCase.png')}/>
</TouchableOpacity>
<TouchableOpacity style={{
marginRight: 25
}}
onPress={this.openCaseView.bind(this)}
>
<Image style={styles.button} source={require('./img/imgCall.png')}/>
</TouchableOpacity>
<TouchableOpacity style={{
marginRight: 25
}}
//onPress={this._onPressButton}
>
<Image style={styles.button} source={require('./img/imgCase.png')}/>
</TouchableOpacity>
</View>
<Text style={{
fontSize: 18,
color: '#fff',
marginLeft: 15,
marginTop: 38,
marginBottom: 20
}}>My Cases</Text>
</View>
</View>
<View>
{caseList}
</View>
<View>
<ColoredFab>
<Image pointerEvents="none" source={require('./img/plus_white.png')}/>
</ColoredFab>
</View>
</View>
);
將ScrollView添加為我的主視圖解決我的問題
var _scrollView: ScrollView;
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }}
automaticallyAdjustContentInsets={false}
onScroll={() => { console.log('onScroll!'); }}
scrollEventThrottle={200}
style={{height: 300}}>
.....
</ScrollView>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.