Question

一个新的反应本机开发正在尝试实现本机基本页脚导航，但我无法使其正常工作。现在，让我解释一下我到目前为止所做的尝试。

这是我实现页脚导航的课程：

import React, { Component } from 'react';
// import { FlatList,
//    ActivityIndicator,
//    StyleSheet,
//     View,
//     TouchableNativeFeedback,
//     TouchableHighlight,
//    Text,
//    ListView,
//    Button
//   } from 'react-native';
import { AppRegistry, StyleSheet, ActivityIndicator, ListView, View, Alert,Image,Drawer , Title,Platform} from 'react-native';
import { Container, Header, Content, Footer, FooterTab, Button, Text } from 'native-base';
import First from './First';
import Sec from './Sec';
//import { Container, Header, Content, Badge, Text, Drawer,Icon } from 'native-base';
  import { firebases } from './config/firebase';
  import {Sidebar} from './slidebar';
  import {AppHeader} from './AppHeader';
//import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
const db=firebases.firestore();

const collection = db.collection('Users');
var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 })
export default class Second extends React.Component {

  constructor(props) {
    super(props);
   this.state = {
     isLoading: true,
     index: 0
   }


 }
 switchScreen(index) {
  this.setState({index: index})
}
GetItem (flower_name) {

 Alert.alert(flower_name);

 }


 componentDidMount() {
  var array=[];
  db
  .collection('Users')
  .get()
  .then(snapshot => {
    snapshot
      .docs
      .forEach(doc => {
        array.push({'Email':doc.data().Email,'Password':doc.data().Password});
      });
         alert(array[0]);
          let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
       this.setState({
         isLoading: false,
         dataSource: ds.cloneWithRows(array),
       }, function() {
         // In this block you can do something with new state.
       });
     })
     .catch((error) => {
       console.error(error);
     });




}

 ListViewItemSeparator = () => {
   return (
     <View
       style={{
         height: .5,
         width: "100%",
         backgroundColor: "#000",
       }}
     />
   );
 }


 render() {
  let AppComponent = null;

  if (this.state.index == 0) {
     AppComponent = First
  } else {
     AppComponent = Sec
  }



return (
  <Container>
  <Header><Title> Header... </Title></Header>
  <Content> <AppComponent/> </Content>
  <Footer>
      <Button onPress={() => this.switchScreen(0) }> First </Button>
      <Button onPress={() => this.switchScreen(1) }> Sec </Button>
  </Footer>
</Container>

  );
}}
const styles = StyleSheet.create({

MainContainer :{

// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1,
margin: 5,
paddingTop: (Platform.OS === 'ios') ? 20 : 0,

},

imageViewContainer: {
width: '50%',
height: 100 ,
margin: 10,
borderRadius : 10

},

textViewContainer: {

  textAlignVertical:'center',
  width:'50%', 
  padding:20

}

});

这是班上第一名：

import React, { Component } from "react";
import { Container, Header, Content, Card, CardItem, Text, Body } from "native-base";
export default class First extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Card>
            <CardItem header button onPress={() => alert("This is Card Header")}>
              <Text>NativeBase</Text>
            </CardItem>
            <CardItem button onPress={() => alert("This is Card Body")}>
              <Body>
                <Text>
                  Click on any carditem
                </Text>
              </Body>
            </CardItem>
            <CardItem footer button onPress={() => alert("This is Card Footer")}>
              <Text>GeekyAnts</Text>
            </CardItem>
          </Card>
        </Content>
      </Container>
    );
  }
}module.exports = First

这是第二节课：

import React, { Component } from 'react';
import { Container, Header, Content, Button, Text } from 'native-base';
export default class Sec extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <Button bordered light>
            <Text>Light</Text>
          </Button>
          <Button bordered>
            <Text>Primary</Text>
          </Button>
          <Button bordered success>
            <Text>Success</Text>
          </Button>
          <Button bordered info>
            <Text>Info</Text>
          </Button>
          <Button bordered warning>
            <Text>Warning</Text>
          </Button>
          <Button bordered danger>
            <Text>Danger</Text>
          </Button>
          <Button bordered dark>
            <Text>Dark</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}module.exports = Sec

得到的错误是：无法添加没有不带测量功能的Yoganode父级的孩子（尝试将react raw text shadownode添加到布局shadownode）

如何解决此问题，我有任何错误，请为此分享任何解决方案。预先感谢。

如何使用本机基础库通过React Native添加页脚导航？

0 个答案: