React Native Arka Plan Resim Ekleme

tarihinde gönderilmiş tarafından

React Native ile sayfaların arkasına arka plan resmi eklemek için bir component bulunuyor bu component dışında ekleme olmuyor.

Özellikle olmuyor dememin sebebi eğer CSS ile proje yapmışsanız alışık olduğunuz üzere bir div için backgroud-image verirsiniz o resimde arka planda çıkar ve bunun aynısı react native ile de olur derseniz problem büyük . React native ile StyleSheet tanımlamalarında background image veremezsiniz.

Arka plan resmi oluşturmak için öncelikle componentimizi import edelim .

 
  import {ImageBackground} from 'react-native'

sonrasında bu componentimizi render methodumuzun içerisinde kullanalım . ;

render(){
    return(
            <ImageBackground source={require('../assets/image.png')} style={{flex:1}} >
                    <View>
                    {....}
                    </View>
            </ImageBackground>
        )
}

 

eğer arkaplan olarak atanacak resim projenin içindeyse yukarıdaki gibi require kullanırız ama bu resim bir URL de sie kullanım biraz farklı onada aşağıdaki örnekte değindim.

render(){
    return(
            <ImageBackground source={{uri:'https://www.brkdgn.com/resim.png'}} style={{flex:1}} >
                    <View>
                    {....}
                    </View>
            </ImageBackground>
        )
}