Dalam kode saya saat ini, saya telah membuat bilah navigasi khusus dan saya menggunakan ini sebagai bilah navigasi saya ketika saya menginstal aplikasi ini pada ponsel dengan ukuran layar yang lebih kecil, tombol yang muncul di ujung kanan layar tidak ditampilkan dan saya kira ini karena lebar dan tinggi spesifik tombol yang saya gunakan dalam kode ini

Sebenarnya, seluruh tata letak tombol dan gambar berubah ketika saya menggunakannya di perangkat lain dengan ukuran layar berbeda

Apakah ada cara untuk menghapus dimensi hard-code ini dan membuatnya berfungsi di semua perangkat dengan ukuran apa pun?

Aplikasi saya juga berjalan lambat di perangkat, perlu waktu untuk memuat gambar, apakah karena ini?

File NavBar.js saya:

import {
 View, Image, StatusBar, TouchableWithoutFeedback, Dimensions
} from 'react-native';
import React, { Component } from 'react';
import { Actions } from 'react-native-router-flux';

const w = Dimensions.get('window').width;

class NavBar extends Component {
  render() {
    return (
      <View>
      <StatusBar />
      <View
      style={{
        width: w,
         position: 'absolute',
         flexDirection: 'row',
          backgroundColor: 'transparent',
         }} >
      <TouchableWithoutFeedback onPress={() => Actions.pop()}>
      <Image
    source={require('./Images/back-arrow.png')}
    style={styles.backarrowStyle} />
      </TouchableWithoutFeedback>

      <Image
  source={require('./Images/help.png')}
  style={styles.helpStyle} />


  <Image
source={require('./Images/setting.png')}
style={styles.settingStyle} />
    </View>
</View>
    );
  }

}
const styles = {
  backarrowStyle: {
    resizeMode: 'contain',
    flexDirection: 'row',
    width: 55,
    height: 55,
    left: 0,
    justifyContent: 'flex-start'
  },
  helpStyle: {
    resizeMode: 'contain',
      width: 50,
      height: 50,
      left: 200,
      justifyContent: 'flex-end',
      position: 'relative'

  },
  settingStyle: {
    resizeMode: 'contain',
    width: 50,
    height: 50,
    left: 210,
    justifyContent: 'flex-end',
  position: 'relative',

}
};


export default NavBar;
0
Adarsh Sreeram 11 Agustus 2017, 10:02

2 jawaban

Jawaban Terbaik

Anda dapat menggunakan Dimensions dari react-native untuk mendapatkan lebar jendela, dan kemudian menghitung lebar dan tinggi yang diinginkan dari itu.

const buttonWidth = Dimensions.get('window').width / something
2
Kraylog 11 Agustus 2017, 07:33

Ada beberapa cara untuk melakukan ini, beberapa lebih mudah daripada yang lain dan semuanya tergantung pada apa yang Anda butuhkan.

Dengan menggunakan Dimensions from 'react-native' Anda dapat mengambil tinggi, lebar, skala font, dan skala layar dan jendela yang memungkinkan Anda memastikan semuanya diubah ukurannya dengan benar.

Untuk sesuatu yang berfungsi sama baiknya, Anda dapat mencoba menggunakan flex untuk mengukur bilah navigasi Anda. misalnya Anda menggunakan styles untuk mengubah ukuran sehingga Anda dapat menambahkan width: '100%' ke gaya tampilan wadah (tepat setelah <StatusBar />) lalu tambahkan flex:1 ke helpstyle, backarrowstyle dan settingstyle dan mereka akan secara independen mengambil jumlah ruang yang sama di dalam wadah.

0
Tierna D. Jack Lawless 11 Agustus 2017, 08:17