react / react/react-native

Image component with local uri source (file://) does not render initially

Aperta
#17,096 32 commenti 3 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Bug Component: Image Help Wanted :octocat: Platform: Android Ran Commands
Lingua principale
C++
Stelle
127k
Fork
25.3k
Merge medio
1g 23h
PR unite (30g)
4

Descrizione

Image components with local uri sources (file://) do not render initially. When a re-render of the component tree happens, the images get rendered.

Environment

Environment:
OS: macOS High Sierra 10.13.1
Node: 8.9.1
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.9.0
Xcode: 9.1 (9B55)
Android Studio: 3.0.1

Packages: (wanted => installed)
react-native: 0.51.0 (@sraka1 reports this is still an issue in 0.58.4)
react: 16.0.0

Target Platform: Android (5.0.0)

Steps to Reproduce
const image = {uri: 'http://my.bamps.online/cfs/files/images/D8Xg27puAiqjvKetD?store=normal'}
// image2 is cached version of image by react-native-cached-image
const image2 = {uri: 'file:///data/data/com.testcachedimage/cache/imagesCacheDir/my_bamps_online_e6d51c26611343fb5e8c3e493674423c3d3f3943/38baef384cbb5bcc5f6138ca0653884561f85fde.jpg'}
export default class App extends Component<{}> {
  render() {
    return (
      <View style={{backgroundColor:'#777'}}>
        <Image source={image2} style={{width: 100, height: 100}}/>
        <Image source={image2} style={{width: 300, height: 100}}/>
        <ImageBackground source={image2} style={{width: 100, height: 100}}/>
        <ImageBackground source={image2} style={{width: 300, height: 100}}/>
        <Image source={image} style={{width: 100, height: 100}}/>
        <Image source={image} style={{width: 300, height: 100}}/>
      </View>
    );
  }
}
Actual Behavior

2017-12-06_15-05-16

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con la riproduzione Android fornita usando Image e ImageBackground con sorgenti file://, quindi traccia il percorso di rendering iniziale per questi componenti. Il lavoro è completato quando le immagini locali memorizzate nella cache vengono visualizzate al primo rendering del componente senza richiedere un successivo re-rendering dell’albero; verifica sia le dimensioni delle immagini sia i tipi di componente dell’esempio.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
android, javascript, react-native
Ambito
mobile
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.