Question

我正在导入自定义组件（RecipeCard），它不会出现在屏幕上。

我相当肯定它与我目前使用的样式有关。

fastimage组件的工作原理与RN组件完全相同，可以看作here。

感谢任何帮助！

File1中

<View style={styles.container}>
    <Head
      headerText={this.props.type}
      navigation={this.props.navigation}
      backButton
    />
    <FlatList
      data={this.state.data}
      renderItem={({ item }) => <RecipeCard {...item} />}
    />
</View>
 const styles = {
   container: {
     flex: 1
   }};

RecipeCard

<FastImage
   style={styles.imageStyle}
   source={{ uri: this.props.image }}
>
  <View style={styles.titleContainer}>
      <Text style={styles.titleText}>             
       {this.props.title}
      </Text>
      <Text style={styles.subtitleText}>
       {this.props.subtitle}
      </Text>
  </View>
</FastImage>

const styles = StyleSheet.create({
  imageStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: 'transparent',
  },
  titleContainer: {
    position: 'absolute',
    marginTop: 15,
    zIndex: 2,
    bottom: 13,
    flex: 1,
    width: '100%',
    height: 70,
    flexDirection: 'column',
    alignItems: 'flex-start',
  },
  titleText: {
    color: 'white',
    fontWeight: '800',
    paddingLeft: 5,
    paddingTop: 10
  },
  subtitleText: {
    color: '#adadad',
    fontWeight: '500',
    paddingLeft: 5,
    paddingTop: 5,
  }
});

Answer 1

尝试将resizeMode添加到FastImage：

resizeMode={FastImage.resizeMode.contain}

它也在FastImage的文档中描述：

import FastImage from 'react-native-fast-image'

const YourImage = () =>
  <FastImage
    style={styles.image}
    source={{
      uri: 'https://unsplash.it/400/400?image=1',
      headers:{ Authorization: 'someAuthToken' },
      priority: FastImage.priority.normal,
    }}
    resizeMode={FastImage.resizeMode.contain}
  />

Answer 2

我尝试了您上面给出的示例，我能够在Scanner中看到图片略有变化，只是添加了List<Integer> list = new ArrayList<>(); int totalNum = 5;* Scanner sc = new Scanner(System.in); for (int i = 0; i < totalNum; i++) { list.add(sc.nextInt()); } System.out.println("The max is: " + Collections.max(list));并显示了图片。

RecipeCard组件

imageStyle

在height我添加了const RecipeCard = (props) => { return ( <FastImage style={styles.imageStyle} source={{ uri: 'https://unsplash.it/400/400?image=1' }} > <View style={styles.titleContainer}> <Text style={styles.titleText}> {props.title} </Text> <Text style={styles.subtitleText}> {props.subtitle} </Text> </View> </FastImage> ); }

imageStyle

希望这有帮助！

React Native：组件不呈现

2 个答案: