HOWTO · React Native
React Native の動的画像
このチュートリアルでは、React Native に動的画像を含める方法について説明します。
このページの内容
React Native アプリに画像を動的に含める必要がある場合があります。 これらの画像は、条件付きで、またはユーザーがボタンをクリックしたりアクションを実行したりすると変化します。
関数 require() を使用して、画像のパスを渡すことで画像モジュールを動的に要求できます。
この記事では、React Native アプリに画像を動的に含める方法を学びます。 また、必要な例と説明を提供することで、トピックをより簡単にします。
この目的のために、required() という名前の関数を使用します。 トピックを簡単にするために例を見てみましょう。
React Native アプリに動的画像を追加する
以下の例では、React Native アプリに画像を動的に含める方法を示しました。 次のコードを見てみましょう。
// Importing necessary packages
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Image, Text, View } from 'react-native';
// Our main function
export default function App() {
let img = "./assets/image2.jpg"; // Declaring a variable that hold the image location
return (
<View style={styles.container}>
<Text>Simple Image</Text>
<Image style={styles.img} source={require(img)} />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({ // Providing some styles to the UI
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginTop: 100,
},
img: {
width: '100%',
height: 120,
},
});
各行の目的については既に説明しました。 上記のコード例では、最初に画像の場所を保持する img という名前の変数を作成しました。
その後、特定の場所から画像をロードする require() 関数にその変数を渡しました。 上記の例を実行すると、次のような出力が得られる場合があります。
出力：
上記のコード例は React Native で作成されており、Expo-CLI を使用してアプリを実行していることに注意してください。
