将scrollView动态地移动到特定位置
我正在使用rect native开发一个App。我想使用horizental scrollview来显示我的屏幕中的月份，如下所示：
我的问题是，当屏幕加载时，它应该在用户进入屏幕时显示滚动的当前月份。
这是我的代码：
<ScrollView horizontal={true} 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>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month6"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth6?'#000':'#9B9B9B'}]}>{I18n.t("month6")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth6?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month7"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold, {color:this.state.underlineMonth7?'#000':'#9B9B9B'}]}>{I18n.t("month7")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth7?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month8"))}}style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth8?'#000':'#9B9B9B'}]}>{I18n.t("month8")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth8?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month9"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth9?'#000':'#9B9B9B'}]}>{I18n.t("month9")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth9?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month10"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth10?'#000':'#9B9B9B'}]}>{I18n.t("month10")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth10?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month11"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth11?'#000':'#9B9B9B'}]}>{I18n.t("month11")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth11?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month12"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[commonStyle.normalItemBold,{color:this.state.underlineMonth12?'#000':'#9B9B9B'}]}>{I18n.t("month12")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth12?100:0} ]}/>
</View>
</TouchableOpacity>
</ScrollView>
</View>
<View style={styles.body}>
</View>
我使用以下方法突出显示所选月份并且工作正常。
onPressDate=(date)=>{
console.log("datedatedatedate11111", date);
if (date==I18n.t("month1") || date=='1') {
this.setState({underlineMonth1: true,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 1,
});
currentMonth= 1;
}
else if (date==I18n.t("month2")|| date=='2') {
console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: true,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 2,
});
currentMonth= 2;
}
else if (date==I18n.t("month3")|| date=='3') {
//console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: true,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 3,
});
currentMonth= 3;
}
else if (date==I18n.t("month4")|| date=='4') {
//console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: true,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 4,
});
currentMonth= 4;
}
else if (date==I18n.t("month5")|| date=='5') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: true,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 5,
});
currentMonth= 5;
}
else if (date==I18n.t("month6")|| date=='6') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: true,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 6,
});
currentMonth= 6;
}
else if (date==I18n.t("month7")|| date=='7') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: true,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 7,
});
currentMonth= 7;
}
else if (date==I18n.t("month8")|| date=='8') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: true,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 8,
});
currentMonth= 8;
}
else if (date==I18n.t("month9")|| date=='9') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: true,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 9,
});
currentMonth= 9;
}
else if (date==I18n.t("month10")|| date=='10') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: true,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 10,
});
currentMonth= 10;
}
else if (date==I18n.t("month11")|| date=='11') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: true,
underlineMonth12: false,
// currentMonth: 11,
});
currentMonth= 11;
}
else if (date==I18n.t("month12")|| date=='12') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: true,
//currentMonth: 12,
});
currentMonth= 12;
}
}
我也在componentDidMount中调用函数，以便填充它：
componentDidMount(){
var curMonth=moment().month();
console.log('curMonth',curMonth);
this.onPressDate(curMonth);
}
这种方法有效，但如果以当前月份为五月为例，则不会在scrollView中显示该月份。换句话说，滚动视图的位置没有改变，因此用户需要滚动它以查看所选月份。你能帮我按照当前月份将scrollView移动到正确的位置。
1 个答案:
答案 0 :(得分：1)
为此，我在ScrollView中使用了计时器和scrollTo函数。请记住，这样做需要使用引用。 （它存在于代码中，实际上，在componentDidMount（）中，我将计时器放置了一秒钟，然后执行scrollTo函数。在scrollTo中放置到正确位置的数量是实验性的，您必须根据自己的情况进行检查，但是在当前条件下，它可以正常工作，足以将此代码作为项目中的组件放置，并在任何需要的地方调用它，希望能对您有所帮助。 ：）
default class Calender extends React.Component {
constructor(props) {
super(props);
this.calendarSendBack = this.calendarSendBack.bind(this);
this.state = {
isLoading: false,
underlineMonth1:false,
underlineMonth2:false,
underlineMonth3:false,
underlineMonth4:false,
underlineMonth5:false,
underlineMonth6:false,
underlineMonth7:false,
underlineMonth8:false,
underlineMonth9:false,
underlineMonth10:false,
underlineMonth11:false,
underlineMonth12:false,
// currentMonth:1,
year:moment().format('YYYY'),
firstTab:true,
EmailColor: '#9B9B9B',
textEmailColor:'#FFF',
};
this.scrollView = null;
this.height=Dimensions.get('window').width>310?160:40;
}
calendarSendBack(info) {
// console.log("Key is :", info);
this.props.callback(info);
}
onPress=(param)=>{
///console.log("rthrethreh 1234");
if (param=="tickets") {
this.setState({firstTab: true, textStampaColor:'#000', textEmailColor:'#FFF', EmailColor:'#9B9B9B', StampaColor: 'transparent'});
}
else {//stampa gift
this.setState({firstTab: false, textStampaColor:'#FFF', textEmailColor:'#000', EmailColor:'transparent', StampaColor: '#9B9B9B'});
}
}
onPressDate=(date)=>{
if (date==I18n.t("month1") || date=='1') {
this.setState({underlineMonth1: true,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 1,
});
currentMonth= 1;
}
else if (date==I18n.t("month2")|| date=='2') {
this.setState({underlineMonth1: false,
underlineMonth2: true,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 2,
});
currentMonth= 2;
}
else if (date==I18n.t("month3")|| date=='3') {
//console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: true,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 3,
});
currentMonth= 3;
}
else if (date==I18n.t("month4")|| date=='4') {
//console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: true,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
// currentMonth: 4,
});
currentMonth= 4;
}
else if (date==I18n.t("month5")|| date=='5') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: true,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 5,
});
currentMonth= 5;
}
else if (date==I18n.t("month6")|| date=='6') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: true,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 6,
});
currentMonth= 6;
}
else if (date==I18n.t("month7")|| date=='7') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: true,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 7,
});
currentMonth= 7;
}
else if (date==I18n.t("month8")|| date=='8') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: true,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 8,
});
currentMonth= 8;
}
else if (date==I18n.t("month9")|| date=='9') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: true,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 9,
});
currentMonth= 9;
}
else if (date==I18n.t("month10")|| date=='10') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: true,
underlineMonth11: false,
underlineMonth12: false,
//currentMonth: 10,
});
currentMonth= 10;
}
else if (date==I18n.t("month11")|| date=='11') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: true,
underlineMonth12: false,
// currentMonth: 11,
});
currentMonth= 11;
}
else if (date==I18n.t("month12")|| date=='12') {
// console.log("datedatedatedate222", date);
this.setState({underlineMonth1: false,
underlineMonth2: false,
underlineMonth3: false,
underlineMonth4: false,
underlineMonth5: false,
underlineMonth6: false,
underlineMonth7: false,
underlineMonth8: false,
underlineMonth9: false,
underlineMonth10: false,
underlineMonth11: false,
underlineMonth12: true,
//currentMonth: 12,
});
currentMonth= 12;
}
this.getHistoricData(currentMonth);
this.calendarSendBack(currentMonth);
}
componentDidMount=()=>{
var curMonth=moment().month();
if (curMonth==0) {
curMonth=1;
}
else {
curMonth=curMonth+1;
}
//curMonth=12
var passX;
if (curMonth==1) passX=0;
else if (curMonth==2) passX=120;
else if (curMonth==3) passX=240;
else if (curMonth==4) passX=360;
else if (curMonth==5) passX=480;
else if (curMonth==6) passX=600;
else if (curMonth==7) passX=720;
else if (curMonth==8) passX=830;
else if (curMonth==9) passX=940;
else if (curMonth==10) passX=1080;
else if (curMonth==11) passX=1180;
else if (curMonth==12) passX=1300;
Timer.setTimeout(
this, 'scrollView', () => this.scrollView.scrollTo({x: passX, y: 0, animated: true}), 1000
);
console.log('curMonth',curMonth);
this.onPressDate(curMonth);
this.getHistoricData(curMonth);
}
onBackPress = () => {
const {goBack} = this.props.navigation;
goBack();
}
render() {
//console.log('Home state: ', this.state);
return (
<View style={styles.mainContainer}>
<View style={styles.rollHeader}>
<ScrollView ref={scrollView => this.scrollView = scrollView} horizontal={true} showsHorizontalScrollIndicator={false} >
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month1"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth1?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{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.titleItem17,{color:this.state.underlineMonth2?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{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.titleItem17,{color:this.state.underlineMonth3?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{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.titleItem17,{color:this.state.underlineMonth4?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{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.titleItem17,{color:this.state.underlineMonth5?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month5")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth5?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month6"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth6?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month6")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth6?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month7"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17, {color:this.state.underlineMonth7?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month7")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth7?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month8"))}}style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth8?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month8")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth8?100:0}]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month9"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth9?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month9")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth9?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month10"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth10?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month10")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth10?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month11"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{ color:this.state.underlineMonth11?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month11")}</Text>
<View style={[styles.rowSep, {opacity: this.state.underlineMonth11?100:0} ]}/>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => {this.onPressDate(I18n.t("month12"))}} style={styles.month}>
<View style={{alignSelf: 'center' }}>
<Text style={[CommonStyle.titleItem17,{color:this.state.underlineMonth12?'#000':'#9B9B9B', fontWeight: 'bold'}]}>{I18n.t("month12")}</Text>
<View style={[styles.rowSep, { opacity: this.state.underlineMonth12?100:0} ]}/>
</View>
</TouchableOpacity>
</ScrollView>
</View>
<View style={[CommonStyle.rowSep, {height:1}]}/>
</View>
);
}
};
const styles = StyleSheet.create({
mainContainer: {
flex:1,
flexDirection: 'column',
backgroundColor: "#F7F7F7"
},
row: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
rowSep: {
height: 4,
marginVertical: 4,
//width: Dimensions.get('window').width,
backgroundColor: '#BD9941',
marginBottom:20,
//marginTop:20,
},
rowSepMain : {
height: 3,
marginVertical: 4,
//width: Dimensions.get('window').width,
backgroundColor: '#000',
marginBottom:12,
//marginTop:20,
},
rollHeader: {
//flex:2,
//height:100,
//marginTop:40,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
//backgroundColor: '#c8d6e5',
},
month: {
flex:1,
alignItems: 'center',
justifyContent: 'center',
width: 100,
height:40,
marginTop:25,
marginLeft:10,
marginRight: 10,
// backgroundColor: 'red'
},
});
相关问题
- 在React Native中获取ScrollView的当前滚动位置
- 响应本机PanResponder以获取当前的scrollView位置
- 如何在React Native中找到ScrollView for Android的底部位置
- 具有绝对位置的水平ScrollView React Native
- React-Native ScrollView在setState上丢失了位置
- 如何在本机中动态修改Scrollview高度
- 将scrollView动态地移动到特定位置
- React Native-如何自动将ScrollView滚动到光标位置？
- 将本机ScrollView反应到默认位置
- React-Native ScrollView与自定义起始位置的中心对齐
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？