I have the following horizontal scrollView and I would like to scroll to X position.
<ScrollView horizontal={true} ref={ref => this.scrollView = ref} showsHorizontalScrollIndicator={false}>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month1"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth1?'#000':'#9B9B9B'}]}>{I18n.t("month1")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth1?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month2"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth2?'#000':'#9B9B9B'}]}>{I18n.t("month2")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth2?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month3"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth3?'#000':'#9B9B9B'}]}>{I18n.t("month3")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth3?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month4"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth4?'#000':'#9B9B9B'}]}>{I18n.t("month4")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth4?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month5"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth5?'#000':'#9B9B9B'}]}>{I18n.t("month5")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth5?100:0} ]}/>
</View>
</TouchableOpacity>
</ScrollView>
I used scrollTo in the ComponentDidMount() but it did't work and the scrollView dose't come up with the moved position. Here is the code:
componentDidMount=()=>{
this.scrollView.scrollTo({ X:0, Y:100 });
}
Can you help me to solve the problem?
Scrolling to a position can be achieved by using the scrollTo({x: 0, y: 0, animated: true}) method.
Just set a x: value for horizontal scrolling or y: value for vertical.
In your case it should be:
scrollTo({x: 100, y: 0, animated: true})
Related
so i want to display multiple content on the screen using the for loop and it dose not seem to work. with what i want to do using the map method is not going to work because i don't have an array. here is what i tried.
{() => {
for (let i = 0; i < cartnumpass; i++) {
<View style={styles.flyingcard}>
<View style={styles.amt}>
<TouchableOpacity>
<Icon name="ios-add" type="ionicon" color="#0079b1" />
</TouchableOpacity>
<Text style={{fontSize: RFPercentage(2.5)}}>1</Text>
<TouchableOpacity>
<Icon name="ios-remove" type="ionicon" color="#ffaaaa" />
</TouchableOpacity>
</View>
<View style={styles.img}>
<Image
source={require('../resources/Cameras.jpg')}
style={styles.image}
/>
</View>
<View style={styles.des}>
<Text style={styles.heading}>Fuhr Camera</Text>
<Text style={styles.sub}>N 2,000.00 NGN</Text>
<TouchableOpacity
onPress={() => modalfunc(true)}
style={{
justifyContent: 'space-between',
borderColor: '#555',
borderWidth: 1,
borderStyle: 'solid',
width: '90%',
alignItems: 'center',
flexDirection: 'row',
padding: '2%',
}}>
<Text style={{fontSize: RFPercentage(1.7)}}>
Rent Duration
</Text>
<Icon
name="ios-add-circle"
type="ionicon"
color="#888"
size={15}
/>
</TouchableOpacity>
</View>
<View style={styles.cancel}>
<TouchableOpacity style={styles.btn}>
<Icon name="ios-close" type="ionicon" color="#fff" />
</TouchableOpacity>
</View>
</View>;
}
}}
with this code nothing displays on the screen, i don't know if it is possible to write a loop in this form
thanks in advance
You wouldn't do it that way, you would do something like:
return new Array(cartnumpass).fill().map((_, index) => {
<View key={index} style={styles.flyingcard}>
// ...
</View>
});
Or you could do something like:
const views = [];
for (let i = 0; i < cartnumpass; i++) {
views.push(
<View key={i} style={styles.flyingcard}>
// ...
</View>
);
}
return views;
This is normal Screen :
This is abnormal Screen :
The property borderRadius affect backgroundColor , I really don't know what the problem is.
Please help me solve this problem.
This is my components Panel.js
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:'#ffffff',
margin:$F.scale(10),
// borderRadius:$F.scale(3),
paddingLeft:$F.scale(8),
paddingRight:$F.scale(8),
},
contTitle:{
flexDirection:'row',
paddingTop:$F.scale(10),
paddingBottom:$F.scale(10),
marginBottom:$F.scale(10),
alignItems:'center',
borderBottomWidth:$F.compatiblePixel*1,
borderBottomColor:'#DFDFDF',
},
cont:{
flex:1,
paddingBottom:$F.scale(10),
},
rightHeader:{
flex:1,
flexDirection:"row",
justifyContent:'flex-end',
// backgroundColor:"#444444",
}
});
<View style={styles.container}>
<View style={styles.contTitle}>
<Text style={{fontSize:$F.scale(13),color:"#000000",flex:1}}>{this.state.titleCont}</Text>
<SelectOption
options={this.state.selOptions}
onSelectOptions={this._ChooseList.bind(this)}
selectShow={this.props.rightHeader?false:this.props.selectShow}
/>
<View style={[{display:this.props.rightHeader?"flex":"none"},styles.rightHeader]}>
{
this.props.rightHeader
}
</View>
</View>
<View style={styles.cont} >
{this.props.children}
</View>
</View>
I use in learnning.js
<ScrollView style={[this.props.style,styles.container]}>
<Panel titleCont="学习轨迹" selectShow={false}>
<View style={styles.progressItems}>
<View style={styles.Line}></View>
<View style={styles.progressBox}>
{this.state.learningData.map((v,i)=>{
return (
<ProcessBox key={v.id}>
<TouchableHighlight underlayColor="rgba(0,0,0,0)" activeOpacity={1} onPress={()=>{this._getClassifyId(v.secondClassifyId,v.id)}}>
<View style={styles.learnLesson}>
<View style={styles.lessonImg} >
<Image source={{uri:IMGHEADURL+v.cover}} style={styles.Image}/>
</View>
<View style={styles.lessonMsg}>
<Text style={{fontSize:$F.scale(7.7),color:"#4A4A4A"}}>{v.name}</Text>
<Text style={{fontSize:$F.scale(6),color:"#BBBBBB",marginBottom:$F.scale(5.5)}}>{formatTime(v.hasStudy?v.study_time:v.create_time,"full")}</Text>
<View style={styles.lessonStatus}>
<View style={[styles.statusItems,styles.status1]}>
<Text style={{fontSize:$F.scale(6.1),color:"#E5E0D0"}}>{v.hasStudy?"练习中":"未练习"}</Text>
</View>
<View style={[styles.statusItems,styles.status2]}>
<Text style={{fontSize:$F.scale(6.1)}}>{v.firstClassifyName}</Text>
</View>
<View style={[styles.statusItems,styles.status2]}>
<Text style={{fontSize:$F.scale(6.1)}}>{v.secondClassifyName}</Text>
</View>
<View style={styles.shareBtn}>
<ICON name="uniE917" size={$F.scale(8.8)} color="#C8C8C8" />
</View>
</View>
</View>
</View>
</TouchableHighlight>
</ProcessBox>
)
})}
</View>
</View>
</Panel>
</ScrollView>
The number of cycles is within ten, the style is good, and more than ten the backgroundColor is transeparents.
I am trying to put a background color for an app I am making but it doesn't fit to all the screen and the bottom of it doesn't take the style.
This is my code:
<ScrollView>
<View style={styles.main}>
<View style={{ marginTop: 10 }}>
<Image style={{ flex: 1, height: 80, width: 80, alignSelf: 'center', marginTop: 23 }}
source={require('./../src/img/profile.png')} />
</View>
<View style={styles.fourblock}>
<TouchableOpacity
style={styles.redbox}
onPress={() => Actions.personal()}>
<Text style={styles.redboxText}>
Personal Detail
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.redbox}
onPress={() => Actions.savedschools()}>
<Text style={styles.redboxText}>
Saved Schools
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.redbox}
onPress={() => Actions.languages()}>
<Text style={styles.redboxText}>
Your Reviews
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
And this is the style I want to put:
main: {
//marginTop: 52,
backgroundColor: '#F8F8FF',
flex: 1,
},
<ScrollView> must be inside <View style={styles.main}>
so
<View style={styles.main}>
<ScrollView>
<View>
// .........
</View>
</ScrollView>
</View>
<Image style={{ flex: 1, height: 80, width: 80, alignSelf: 'center', marginTop: 23 }}
resizeMode: 'stretch', // or 'cover' . <<------------------
source={require('./../src/img/profile.png')} />
One more way you can fit view on all screen is using positioning absolute and make all left, top, right and bottom 0.
Here is an example.
<View style={{ position : 'absolute', top : 0, left : 0, right : 0,bottom : 0,}}</View>
I have the following code which is returned in a render function in my react-native app. container have its flex property set to 1.
Even when the content is overflowing the scroll is not working. What am I doing wrong?
Also tried setting flex for ScrollView to 1. Still not working.
<View style={globalStyle.container}>
{flashMessage}
<ScrollView>
<View style={globalStyle.header}>
<Text style={globalStyle.title}> {localization.categories} </Text>
</View>
<ListView style={{marginTop: 10}}
dataSource={this.state.dataSource}
renderRow={(rowData, sectionID, rowID)=> this.renderRow(rowData, sectionID, rowID)}
/>
</ScrollView>
<View style={{position: 'absolute', height: 70, left: 0, right: 0, bottom: 0, flexDirection:'row', justifyContent:'center'}}>
<TouchableHighlight style={globalStyle.footer} onPress={() => { this.redirect('home'); }} >
<View>
<Image style={globalStyle.footerIcons} source={require('./Thumbnails/ -button-selected.png')}/>
<Text style={globalStyle.footerText,globalStyle.selected} > {localization.meditate} </Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={globalStyle.footer} onPress={() => { this.redirect('profile');}} >
<View>
<Image style={globalStyle.footerIcons} source={require('./Thumbnails/user.png')} />
<Text style={globalStyle.footerText} > {localization.me} </Text>
</View>
</TouchableHighlight>
<TouchableHighlight style={globalStyle.footer} onPress={() => { this.redirect('settings');}}>
<View>
<Image style={globalStyle.footerIcons} source={require('./Thumbnails/settings.png')} />
<Text style={globalStyle.footerText} > {localization.settings} </Text>
</View>
</TouchableHighlight>
</View>
</View>
I believe you shouldn't use ListView inside ScrollView.
You can use renderHeader function and put there
your header:
<View style={globalStyle.header}>
<Text style={globalStyle.title}> {localization.categories} </Text>
</View>
in my app i cant scroll my view.i have my Texts and buttons bottoms of the screen but i cant scroll my view.is react native doesn't give any default scrolling effect?
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>
);
Adding ScrollView as my main view Solve My problem
var _scrollView: ScrollView;
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }}
automaticallyAdjustContentInsets={false}
onScroll={() => { console.log('onScroll!'); }}
scrollEventThrottle={200}
style={{height: 300}}>
.....
</ScrollView>