кнопка react native не помещается на экране

#reactjs #react-native

Вопрос:

У меня на экране 7 кнопок, но 1 кнопка видна наполовину, одна кнопка вообще не подходит. мой код:

 render() {
    return (
      <ScrollView style={styles.container}>

        <Header />

        <View>
          <Text style={styles.headerText}>
            LC Teknoloji
        </Text>
        </View>

        <View style={styles.btnstyl}>
          <Button
            onPress={this.Isgr}
            title="İş Giriş"
            color="#00B0FF"
          />
        </View>

        <View style={styles.btnstyl}>
          <Button
            onPress={this.Yapilicak}
            title="Yapılacaklar"
            color="#00B0FF"
          />
        </View>

        <View style={styles.btnstyl}>
          <Button
            onPress={this.gcms}
            title="İş Geçmişi"
            color="#00B0FF"
          />
        </View>

        <View style={styles.btnstyl}>
          <Button
            onPress={this.alnck}
            title="Alınıcaklar"
            color="#00B0FF"
          />
        </View>

        <View style={styles.btnstyl}>
          <Button
            onPress={this.ulist}
            title="Ürün Listesi"
            color="#00B0FF"
          />
        </View>

        <View style={styles.btnstyl}>
          <Button
            onPress={this.Stok}
            title="Stoklar"
            color="#00B0FF"
          />
        </View>

        <View style={styles.btnstyl}>
          <Button
            onPress={this.Musteri}
            title="Müşteriler"
            color="#00B0FF"
          />
        </View>

      </ScrollView>

    );
  }
}

const styles = StyleSheet.create({
  container: {

    backgroundColor: 'grey',
    flex: 1,

    backgroundColor: "#F5FCFF",



  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 0,
    fontWeight: "bold",
    top: 45,
  },
  btnstyl: {
    left: 120,
    height: 60,
    width: 160,
    marginBottom: -20,
    top: 55,
  },
})
 

введите описание изображения здесь

Я изменил цвет фона или что-то в этом роде, когда я его поднимаю, появляются кнопки, он не помещается на экране с того места на картинке

Как вы думаете, почему скриншот не подходит?

Комментарии:

1. Вам следует увеличить размер родительского компонента или уменьшить высоту кнопок в вашем классе btnstyl для (например, с 60 до 55).

Ответ №1:

В твоем стиле. Удалите поля внизу и сверху

 const styles = {
.....
btnstyl: {
    left: 120,
    height: 60,
    width: 160
  },
}
 

И добавьте высоту к компоненту просмотра текста над кнопками:

 <View style={{ height: 100 }}>
  <Text style={styles.headerText}>
   LC Teknoloji
  </Text>
</View>
 

Комментарии:

1. Спасибо, но не могли бы вы сказать мне, в чем была моя логическая ошибка, чтобы я не делал этого снова 🙂