Question

我正在使用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移动到正确的位置。

Answer 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'
  },




});

将scrollView动态地移动到特定位置

1 个答案: