6

ReactNative で NativeBase を使用しようとしており、背景として画像を使用しています。私はしばらくグーグルしてきましたが、ここに私が思いついたコードがあります:

export default class WelcomeScreen extends Component {
    render(){
        return (
            <Container>
                <Header>
                    <Button transparent>
                        <Icon name='ios-arrow-back' />
                    </Button>
                </Header>
                <Content>
                    <Image source={require('../images/telula_upclose.jpeg')} style={styles.backgroundImage} />
                    <Text>Do you ever feel like you dont have a partner</Text>
                </Content>
            </Container>
        );
    }
}

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    backgroundColor:'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  }
});

問題は、これにより画像が大幅に引き伸ばされ、シミュレーターで認識できなくなることです。実際の画像と比較したシミュレーターの画像を次に示します。

シミュレーター画像

実際の画像は次のとおりです。

実際の写真

これを修正するにはどうすればよいですか?

4

6 に答える 6

5

これには2つの解決策があります：

  1. NativeBase ContentコンポーネントはReact Native ScrollViewのラッパーです。ScrollView で Image を使用すると、イメージの高さと幅を含める必要があります。

  2. 画像の寸法についての言及を除外したい場合はView、代わりに を使用してContentください。

<View>
  <Image
     source={testImage}
     style={{ flex: 1, height: null, width: null, resizeMode: 'cover' }}
  />
  <Text>Do you ever feel like you dont have a partner</Text>
</View>
于 2016-09-28T10:52:08.797 に答える
2

これを行うコンポーネントは次のとおりです。

import {
  Dimensions,
  Image,
} from 'react-native'
import React from 'react'

const BackgroundImage = (props) => {
  const window = Dimensions.get('window')
  const height = props.height || window.height
  const width = window.width
  const resizeMode = props.resizeMode || 'cover' // cover
  return (
    <Image
      style={[props.styles, {height: height - props.headerSize, width: null, resizeMode: resizeMode }]}
      opacity={1}
      source={props.uri ? {uri: props.uri} : props.source}
    >
      {props.children}
    </Image>
  )
}

export default BackgroundImage
于 2016-12-03T14:06:40.683 に答える
2

画像の HEIGHT と WIDTH を変更してビュー ポートに表示できます。これにはDimensions、react-native の API を使用できます。詳細については、ディメンション API の反応ネイティブ ドキュメントを参照してください。

import { Text, View, Dimensions } from 'react-native';

export default class WelcomeScreen extends Component {
render(){
    let {height, width} = Dimensions.get('window');
    return (
        <Container>
            <Header>
                <Button transparent>
                    <Icon name='ios-arrow-back' />
                </Button>
            </Header>
            <Content>
                <Image source={require('../images/telula_upclose.jpeg')}  
                   style={[styles.backgroundImage, {height:height, width: width}]} />
                <Text>Do you ever feel like you dont have a partner</Text>
            </Content>
        </Container>
    );
  }
}

let styles = StyleSheet.create({
  backgroundImage: {
  flex: 1,
  backgroundColor:'transparent',
  justifyContent: 'center',
  alignItems: 'center',
 }
});

背景画像の上にテキストが必要な場合は、<Image>コンポーネント内にラップします。

<Image>
   <View>
     <Text>Hello!! </Text>
   </View>
</Image>
于 2016-09-27T18:54:12.503 に答える
0

Dimension を使用して、サイズの画面を取得し、画像のサイズを変更できます。

1- ディメンションのインポート:

import { View, Text, Dimensions } from 'react-native'

2-コンポーネントで、オブジェクトウィンドウでハードウェアサイズを取得します

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

3- 画像のディメンションを追加しました

<Image
     style={{width: window.width, height: window.height}}
     source={require('../images/telula_upclose.jpeg')}
/>

警告: 画像が変形している可能性があります。画像で「resizeMode」小道具を使用します

詳細については、これを参照してください: Image および resizeMode のドキュメント

于 2016-09-27T17:04:45.143 に答える