Question

最近开始使用https://github.com/start-react/native-starter-kit

开发应用

继承我的组成部分：

import React, { Component } from "react";
import { TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import BlankPage2 from "../blankPage2";
import DrawBar from "../drawBar";
import TopNav from "../topNav";
import { DrawerNavigator, NavigationActions } from "react-navigation";
import {
  Container,
  Header,
  Title,
  Content,
  Text,
  Button,
  Icon,
  Left,
  Body,
  Right,
  Image,
} from "native-base";
import { Grid, Row } from "react-native-easy-grid";

import { setIndex } from "../../actions/list";
import { openDrawer } from "../../actions/drawer";
import styles from "./styles";

class News extends Component {
  static navigationOptions = {
    header: null
  };

  render() {
    return (
      <Container style={styles.container}>
        <Header>
          <Left>
            <Button
              transparent
              onPress={() => DrawerNav.navigate("DrawerOpen")}>
              <Icon active name="menu" />
            </Button>
          </Left>

          <Body>
            <Title>News</Title>
          </Body>

          <Right>
          </Right>
        </Header>
        <Content scrollEnabled={false}>
          <TopNav navigation={this.props.navigation}></TopNav>

          <Grid style={styles.mt}>
            {this.props.list.map((item, i) => (
              <Row key={i}>
                <TouchableOpacity
                  style={styles.row}
                  onPress={() =>
                    this.props.navigation.navigate("BlankPage", {
                      name: { item }
                    })}>
                  <Image source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}} />
                  <Text style={styles.text}>{item}</Text>
                </TouchableOpacity>
              </Row>
            ))}
          </Grid>
        </Content>
      </Container>
    );
  }
}

function bindAction(dispatch) {
  return {
    setIndex: index => dispatch(setIndex(index)),
    openDrawer: () => dispatch(openDrawer())
  };
}
const mapStateToProps = state => ({
  name: state.user.name,
  list: state.list.list
});

const NewsSwagger = connect(mapStateToProps, bindAction)(News);
const DrawNav = DrawerNavigator(
  {
    News: { screen: NewsSwagger },
    BlankPage2: { screen: BlankPage2 }
  },
  {
    contentComponent: props => <DrawBar {...props} />
  }
);
const DrawerNav = null;
DrawNav.navigationOptions = ({ navigation }) => {
  DrawerNav = navigation;
  return {
    header: null
  };
};
export default DrawNav;

当然，这是我的错误：

我不知道为什么会这样。只要删除Image标记，错误就会消失。我无法真正导出News组件，因为我正在使用Drawer内容（检查starter-kit-demo）。

修改：IOS发生错误。 Iphone 6模拟器。

Answer 1

当您从Image

导入时，您从native-base导入react-native

import {
  Container,
  Header,
  Title,
  Content,
  Text,
  Button,
  Icon,
  Left,
  Body,
  Right,
  Image // remove this one
} from "native-base";

并添加

import { 
   TouchableOpacity,
   Image 
} from "react-native";

此外，你还需要增加一个高度和高度。正确渲染的宽度。

<Image
  style={{width: 300, height: 300}}
  source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}} 
/>

react-native在显示图像

1 个答案: