Question

问题我正在创建一个非常简单的应用程序，允许用户将帖子上传到firebase，然后该应用程序将呈现firebase上的所有帖子。当我添加FlatList代码来渲染Firebase上的帖子时，我收到了一个错误（问题的底部）。我很乐意帮助修复这个错误，我不知道是什么造成的。

代码

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button, FlatList } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';



const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "candidtwo.firebaseapp.com",
  databaseURL: "https://candidtwo.firebaseio.com",
  storageBucket: "candidtwo.appspot.com",
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

var fontLoaded = false;

var ref = firebase.database().ref('posts');

var newPostRef = ref.push();

export default class App extends React.Component {

  state = {
    fontLoaded: false,
  };



  componentDidMount() {
      Expo.Font.loadAsync({
        'JosefinSans-Regular.ttf': require('./JosefinSans-Regular.ttf'),
      });
 }
  constructor(props) {
    super(props);
    this.state = { postInput: ""}
  }

 render() {
    return (
      <View style={styles.container}>
        <View style={styles.button}>
          <View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
          <Button
            onPress={() => this.setState({ fontLoaded: true })}
            title="Press Me To Load the App After 15 Seconds!"
            color="#fe8200"
            accessibilityLabel="Wait 15 seconds and then press me to load the font!"
          />
        </View>

        {this.state.fontLoaded ? (
          <View style={styles.container}>
            <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 16 }}>
                Whats on your mind? Create a post!
            </Text>  

            <TextInput
                 style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
                 onChangeText={(postInput)=>this.setState({postInput})}
                 value={this.state.postInput}    
             />


    <Button
      onPress={() => {
        newPostRef.set({ content:this.state.postInput });
        this.setState({ postInput: "Your post was succsesfully uploaded! :)" })    
      }}               
      title="                              +                              "
      color="#fe8200"
    />

{/*var path = newPostRef.toString(); */}

            <ScrollView>
               <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
               <View style={{width: 350, height: 250, backgroundColor: '#1daff1',  alignItems: 'center', justifyContent: 'center',    borderRadius: 10, paddingLeft: 10, paddingRight:10}} >
         <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
                    Why do android phones have higher inital quality than apple phones, but apple phones have a more consistent amount of quality throughout their years?
                </Text>
            </View>
               <View style={{width: 350, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
            <Image source={require('./CandidtwoImages/unlove.png')} />
            <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
                    3
                    </Text>
            <Image source={require('./CandidtwoImages/undislike.png')} />
            <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
                    1
                    </Text>
            <Image source={require('./CandidtwoImages/comments.png')} />
            <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
                    8
                    </Text>
        </View>
               <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
               <View style={{width: 35, height: 25, backgroundColor: '#147c41', borderRadius: 10}} />
               <View style={{width: 35, height: 4, backgroundColor: '#0f582d', borderRadius: 10}} />
               <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
           <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
               <View style={{width: 35, height: 25, backgroundColor: '#9dcd46', borderRadius: 10}} />
               <View style={{width: 35, height: 4, backgroundColor: '#6c8f31', borderRadius: 10}} />
               <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
           <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
               <View style={{width: 35, height: 25, backgroundColor: '#d3832e', borderRadius: 10}} />
               <View style={{width: 35, height: 4, backgroundColor: '#935b1e', borderRadius: 10}} />
               <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />





     <FlatList>
        data={ref}
    renderItem={
        ({item}) => 
<View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
           {/*Error happened here*/}    <View style={{width: 350, height: 250, backgroundColor: '#1daff1',  alignItems: 'center', justifyContent: 'center',    borderRadius: 10, paddingLeft: 10, paddingRight:10}}>
         <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
                    {item.content}
                </Text>
            </View>
               <View style={{width: 350, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
            <Image source={require('./CandidtwoImages/unlove.png')} />
            <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
                    3
                    </Text>
            <Image source={require('./CandidtwoImages/undislike.png')} />
            <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
                    1
                    </Text>
            <Image source={require('./CandidtwoImages/comments.png')} />
            <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
                    8
                    </Text>
        </View>
               <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />

    </FlatList>
        </ScrollView>
      </View>) : (null) }
      </View>
    );
  }
}





const styles = StyleSheet.create({
  container: {
    flex: 8,
    backgroundColor: '#e8e8e8',
    alignItems: 'center'
  },
  button: {
    flex: 1,
    backgroundColor: '#e8e8e8',
    alignItems: 'center'
  },
});

错误未知：相邻的JSX元素必须包装在一个封闭的标记中（121：15）

Answer 1

问题是，在为FlatList呈现组件/组时，您需要用父View将所有组件包含在该呈现中，因此将它们包装在一个封闭的中标签＆＃39 ;.每当你在彼此旁边有多个View时，你必须将它们包含在父View中，将其作为经验前进。 EG

<View>
    <View />
    <View />
</View>

现在针对您的问题，您将要在此处添加View

({item}) =>
     <View> //HERE

然后在最后关闭它。此外，您还没有关闭开始FlatList组件声明，因此这也应该在该部分的末尾。你的renderItem道具现在应该是这样的

     renderItem={
                ({item}) =>
                        <View>
                            <View style={{width: 350, height: 250, backgroundColor: '#1daff1',  alignItems: 'center', justifyContent: 'center', borderRadius: 10, paddingLeft: 10, paddingRight:10}}>
                                <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', textAlign: 'center'}}>
                                    {item.content}
                                </Text>
                            </View>

                            <View style={{width: 350, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
                                <Image source={require('./CandidtwoImages/unlove.png')} />
                                <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
                                    3
                                </Text>
                                <Image source={require('./CandidtwoImages/undislike.png')} />
                                <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
                                    1
                                </Text>
                                <Image source={require('./CandidtwoImages/comments.png')} />
                                <Text style={{ fontFamily: 'JosefinSans-Regular.ttf', fontSize: 22, color: '#ffffff', paddingRight: 5, paddingTop:5}}>
                                    8
                                </Text>
                            </View>
                            <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
                        </View>
                }>

请注意，您还应该在此父视图中执行大部分样式设置，但是现在此解决方案应该可以正常工作。您经常会在教程styles.container中看到，这通常是什么，是所有子视图组件的容器。

格式错误React Native / Firebase

1 个答案: