Question

尝试使用Firebase在React Native中设置一些testdata。我已使用$yarn add firebase成功安装。我在FB中添加了测试数据，如下所示： FB data 在我的项目中，我添加了以下代码：

import * as firebase from 'firebase' 

const firebaseConfig = {
    apiKey: "AIzaSyBNKM6Ptbynkg5dEJkwMHNsZhUCsW2JqGE",
    authDomain: "testproject-f4c9f.firebaseapp.com",
    databaseURL: "https://testproject-f4c9f.firebaseio.com",
    projectId: "testproject-f4c9f",
    storageBucket: "testproject-f4c9f.appspot.com",
    messagingSenderId: "48530616964"
}
firebase.initializeApp(firebaseConfig)

然后在渲染中：

let mytext = ""

let testing = 
firebase.database().ref('testCategory/test1/FirstHeader');

testing.on('value', function(snapshot) {
    mytext = snapshot.val()
});

return(
    <View>
       <Text>{mytext}</Text>
    </View>
);

运行应用程序，没有任何显示。任何想法都将不胜感激。

更新：我设法使用此代码在console.log中正确使用了

let child = ""

var ref = firebase.database().ref("testCategory");

ref.once("value")
.then(function(snapshot) {
child = snapshot.child("test1/testHeader").val() 
console.log({child})
});

但出于某种原因，我无法在文本输出中打印它：

return(
    <View>
       <Text>{this.child}</Text>
    </View>
);

它只是空白......

Answer 1

您需要将数据从回调传递到视图。您应该使用像Redux或MobX这样的状态管理器，但是对于此示例，您可以只使用组件状态。

这就是你的组件应该是什么样子。

class Hello extends Component {
  state = {
    child: ''
  }

  componentDidMount() {
    firebase
      .database()
      .ref('testCategory')
      .on('value')
      .then(snapshot => {
        const child = snapshot.child('test1/testHeader').val()

        this.setState({
          child
        })
      })
  }

  render() {
    const { child } = this.state

    return (
      <View>
        <Text>{child}</Text>
      </View>
    )
  }
}

多田！

我的Fire Base代码有什么问题（React Native）

1 个答案: