React native горизонтальная прокрутка не прокручивается

Question

Прокрутка не прокручивается, отображаются только первые три элемента, остальные теряются.

<View style={styles.container}>
    <ScrollView horizontal contentContainerStyle={{ flexGrow: 1 }}>
      <View style={{ width: "33%" }}>
        <TouchableOpacity style={styles.child}>
          <Text>B1</Text>
        </TouchableOpacity>
      </View>
      <View style={{ width: "33%" }}>
        <TouchableOpacity style={styles.child}>
          <Text>B2</Text>
        </TouchableOpacity>
      </View>
      <View style={{ width: "33%" }}>
        <TouchableOpacity style={styles.child}>
          <Text>B3</Text>
        </TouchableOpacity>
      </View>
      <View style={{ width: "33%" }}>
        <TouchableOpacity style={styles.child}>
          <Text>B4</Text>
        </TouchableOpacity>
      </View>
      <View style={{ width: "33%" }}>
        <TouchableOpacity style={styles.child}>
          <Text>B5</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </View>

Вот стили, которые я использую

const styles = StyleSheet.create({  
container: {
    height: "10%",
    width: "75%",
    backgroundColor: "transparent",
    borderRadius: 5,
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderColor: "lightsteelblue",
    display: "flex",
    flexDirection: "row",
    overflow: "hidden",
  },
  child: {
    backgroundColor: "transparent",
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

Я уже пробовал несколько решений, предлагаемых здесь на других постах, и не нашли решения. Любая конструктивная, сердечная критика приветствуется, спасибо за ваше время.

Answer 1

Вот закуска с вашим кодом, который работает.

https://snack.expo.io/@waheed25 / horizontal-scroll-working-

Удалите это flexGrow свойство и поместите width по отношению к устройству или числу и не используйте там проценты, так как он взял width из контейнера .

или просто замените этот код своим.

  <View style={styles.container}>
    <ScrollView horizontal>
      <View style={{ width: 100 }}>
        <TouchableOpacity style={styles.child}>
          <Text>B1</Text>
        </TouchableOpacity>
      </View>
      <View style={{ width: 100 }}>
        <TouchableOpacity style={styles.child}>
          <Text>B2</Text>
        </TouchableOpacity>
      </View>
      <View style={{ width: 100 }}>
        <TouchableOpacity style={styles.child}>
          <Text>B3</Text>
        </TouchableOpacity>
      </View>
      <View style={{ width: 100 }}>
        <TouchableOpacity style={styles.child}>
          <Text>B4</Text>
        </TouchableOpacity>
      </View>
      <View style={{ width: 100}}>
        <TouchableOpacity style={styles.child}>
          <Text>B5</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </View>

Answer 2

Вот как я могу прокручивать, я изменил некоторые css, вы можете изменить в соответствии с вашими требованиями

<View style={{flex: 1}}>
      <ScrollView horizontal>
        <View style={{flex: 1}}>
          <TouchableOpacity style={styles.child}>
            <Text>B1</Text>
          </TouchableOpacity>
        </View>
        <View style={{flex: 1}}>
          <TouchableOpacity style={styles.child}>
            <Text>B2</Text>
          </TouchableOpacity>
        </View>
        <View style={{flex: 1}}>
          <TouchableOpacity style={styles.child}>
            <Text>B3</Text>
          </TouchableOpacity>
        </View>
        <View style={{flex: 1}}>
          <TouchableOpacity style={styles.child}>
            <Text>B4</Text>
          </TouchableOpacity>
        </View>
        <View style={{flex: 1}}>
          <TouchableOpacity style={styles.child}>
            <Text>B5</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </View>

const styles = StyleSheet.create({
  container: {
    height: '50%',
    backgroundColor: 'transparent',
    borderRadius: 5,
    borderTopWidth: 1,
    borderBottomWidth: 1,
    flexDirection: 'row',
  },
  child: {
    backgroundColor: 'transparent',
    width: 200,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
});