Question

我正在使用轮播和一堆卡片制作一个React Native项目我设法在卡片上添加了文字，但无法在卡片上添加图片这是我的代码

 constructor (props) {
    super(props);
    this.state = {
        slider1ActiveSlide: SLIDER_1_FIRST_ITEM,
        GridListItems: [
          { key: "Makeup Artists" , img: 'https://i.imgur.com/UYiroysl.jpg' },
          { key: "Photographers" , img: 'https://i.imgur.com/UYiroysl.jpg'},
          { key: "Wedding Halls" , img: 'https://i.imgur.com/UYiroysl.jpg'},
          { key: "Wedding Planners" , img: 'https://i.imgur.com/UYiroysl.jpg'},
          { key: "Ateliers for Dresses" , img: 'https://i.imgur.com/UYiroysl.jpg'},
          { key: "Hotels" , img: 'https://i.imgur.com/UYiroysl.jpg'},
          { key: "Hair Dresser" , img: 'https://i.imgur.com/UYiroysl.jpg'},
          { key: "Veil Designers" , img: 'https://i.imgur.com/UYiroysl.jpg'},
          { key: "Laser & Beauty Centers", img: 'https://i.imgur.com/UYiroysl.jpg' },
          { key: "Dental Clinics" , img: 'https://i.imgur.com/UYiroysl.jpg'},
          { key: "Gym & Physical Fitness" , img: 'https://i.imgur.com/UYiroysl.jpg'},
          { key: "SPA" , img: 'https://i.imgur.com/UYiroysl.jpg'},
        ]
    };
}

这是我的渲染方式

render () {

  return (
      <SafeAreaView style={styles.safeArea}>[![enter image description here][1]][1]

          <View style={styles.container}>

              <StatusBar
                translucent={true}
                backgroundColor={'rgba(0, 0, 0, 0.3)'}
                barStyle={'light-content'}
              />
              { this.gradient }
              <ScrollView
                style={styles.scrollview}
                scrollEventThrottle={200}
                directionalLockEnabled={true}
                 <FlatList
                  data={ this.state.GridListItems }
                  renderItem={ ({item}) =>
                  <View style={styles.GridViewContainer}>
                    <Image
                      source={{ uri: item.img }}
                      style={styles.image}
                    />
                    <Text style={styles.GridViewTextLayout} onPress={this.GetGridViewItem.bind(this, item.key)} > {item.key} </Text>
                  </View> }
                numColumns={2}
         />
              </ScrollView>

          </View>
      </SafeAreaView>
  );
}

您看到卡片上没有图像时，如何解决此问题？

另外，我想为每张卡添加导航功能，我也该如何实现？

Answer 1

您需要为this link中所述的远程图像设置width和height：

请注意，对于网络和数据图像，您将需要手动指定图像的尺寸！

如果您需要可扩展的大小，则可以使用react-native-responsive-dimensions之类的第3个库

关于导航（假设您使用的是React Navigation），则可以将其他属性添加到name: 'test'之类的项目中，并将<View>替换为TouchableOpacity组件，例如这个：

<TouchableOpacity
    style={styles.GridViewContainer}
    onPress={() => this.props.navigation.navigate(item.name)}>
...
</TouchableOpacity>

React Native卡图像不渲染

1 个答案: