react native 横向滚动条

2,850 阅读1分钟

const testArr = [1,2,3,4,5,6,7,8,9]

<ScrollView
                  showsVerticalScrollIndicator={false}
                  horizontal={true}
                  style={styles.myButton}>
                  {testArr.map((item, index) => {
                    return (
                      <TouchableOpacity
                        style={index === checkNum ? styles.contactService: styles.contactService2}
                        onPress={()=>checkBank(index)}
                        activeOpacity={0.8}>
                        <Text style={index === checkNum ?styles.contactServiceText: styles.contactServiceText2}>收款账户{index}</Text>
                      </TouchableOpacity>
                    );
                  })}
                  {/*<TouchableOpacity
                    style={styles.contactService}
                    activeOpacity={0.8}>
                    <Text style={styles.contactServiceText}>收款账户1</Text>
                  </TouchableOpacity>*/}
                </ScrollView>
contactService: {  width: 100,  height: 28,  borderRadius: 14,  marginRight: 20,  backgroundColor: '#FDB320',  alignItems: 'center',  justifyContent: 'center',},contactService2: {  width: 100,  height: 28,  borderRadius: 14,  marginRight: 20,  alignItems: 'center',  backgroundColor: '#fff',  color: '#FDB320',  justifyContent: 'center',  borderWidth: 1,  borderColor: '#FDB320',},contactServiceText: {  fontSize: 18,  color: '#fff',  fontWeight: '500',},contactServiceText2: {  fontSize: 18,  color: '#FDB320',  fontWeight: '500',},