Question

我正在构建一个简单的 React Native 应用程序，如果您在其中搜索一本书，它将找到存储在该书的数据库中的谷歌图书图像链接并映射它。但是，我遇到了一个问题。图像未在应用程序上呈现，我尝试了多种解决方案来解决此问题。他们都没有工作。请帮忙。

这是我的代码：

class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      search: '',
      loading: false,
      goBack: false,
      results: [],
    };
  }
  render() {
    return (
      <ScrollView style={{ backgroundColor: '#fff' }}>
        <Text></Text>
        <Text></Text>
        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
          <Text style={{ fontSize: 30, marginTop: 20, textAlign: 'center' }}>
            Search
          </Text>
          <TextInput
            value={this.state.email}
            placeholder="Search For Books"
            autoCapitalize="none"
            selectionColor="black"
            underlineColor="black"
            underlineColorAndroid="black"
            style={{
              marginTop: 50,
              fontSize: 20,
              width: '75%',
              marginBottom: 25,
            }}
            onChangeText={(e) => {
              this.setState({ search: e });
            }}></TextInput>
          <Button
            //icon="login"
            mode="outlined"
            loading={this.state.loading}
            color="black"
            onPress={() => {
              axios
                .post('https://diversitylibrary.herokuapp.com/books/search', {
                  query: this.state.search,
                })
                .then((res) => {
                  console.log(res.data.results.map((obj) => obj));
                  this.setState({
                    results: res.data.results.map((obj) => obj),
                  });
                })
                .catch((err) => {
                  console.log(err);
                  alert(
                    'Something went wrong. Are you connected to the internet?'
                  );
                });
            }}
            contentStyle={{
              width: 175,
              height: 50,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            Search {'->'}
          </Button>

          <View>
            {this.state.results.map((result) => (
              <ScrollView>
                <Image
                  key="bookCover"
                  style={{ width: 200, height: 300 }}
                  source={{ uri: result.cover }}></Image>
                <Text>{result.title}</Text>
              </ScrollView>
            ))}
          </View>
        </View>
        <Text></Text>
        <Text></Text>
        <Text></Text>
        <Text></Text>
      </ScrollView>
    );
  }
}

export default Search;

谢谢。（如果您需要查看任何其他文件，请告诉我。）

反应本机图像不呈现

0 个答案: