2

次のような静的データがあります。

{
    "title": "Book an Appointment",
    "image": "../img/icon_booking.png"
  },
  {
    "title": "Client Gallery",
    "image": "icon_gallery.png"
  },
  {
    "title": "Save Before/After Photos",
    "image": "icon_gallery.png"
  },

リスト ビューを作成していて、関連する画像をリスト ビュー セルに渡したいと考えています。リストビューは次のように設定されます。

<ListView
    dataSource={this.state.dataSource}
    renderRow={(data) => <MainListRow {...data} />}
/>

MainListRow は次のように設定されます。

const BOOKING_ICON = require('./img/icon_booking.png');

const MainListRow = (props) => (
  <View style={styles.container}>
    {props.image ? <Image source={{uri: props.image}} style={styles.photo} /> : null}
    <Text style={styles.text}>
      {`${props.title}`}
    </Text>
  </View>
);

export default MainListRow;

他の問題から、画像を呼び出す前に画像を定義する必要があることを理解しています (例: React Native Component に条件付きで画像を含めるにはどうすればよいですか? )

1 つの画像であっても、画像の uri を正しく機能させる方法がわかりません。理想的には、画像を渡して機能させたいだけです。パスのさまざまなバリエーションを試して、正しいものを取得し、最初の要件に一致させましたが、違いはありません。

4

1 に答える 1

1

コメントによると、データ構造を変更して、そこに画像を必要とするだけでした：

var data = [
     {id: 1, text: 'row 1', image: require('./img/icon_booking.png')},
     {id: 2, text: 'row 2'},
     {id: 3, text: 'row 3'},
     {id: 4, text: 'row 4'},
     {id: 5, text: 'row 5'},
     {id: 6, text: 'row 6'},
     {id: 7, text: 'row 7'},
     {id: 8, text: 'row 8'},
     {id: 9, text: 'row 9'},
     {id: 10, text: 'row 10'},
    ];
于 2016-10-18T17:27:58.400 に答える