我的React Native的编码正在运行，但是模拟器看起来很奇怪

Question

我的编码看起来可以用，但是当我在模拟器上运行时，看起来很奇怪 这是我的编码

import React , { Component } from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, TouchableOpacity, TextInput, Button } from 'react-native';
import Constants from 'expo-constants';
import firebase from './firebase';

const todos = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

function Item({ title }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

export default class App extends Component {
  todoDatabase = firebase.database().ref('todo');
  state = { todos : {} , selectedId: ''}
  //read
  componentDidMount() {
   this.todoDatabase.on('value', todos => {
     const todosJSON = todos.val();
    this.setState({todos: todosJSON === null ? {} : todosJSON }) ;
   })
   this.todoDatabase.push({color: 'red'})
  }
  //create
  create(){
  this.todoDatabase
  .push({color: 'yellow'})
}
delete(){
  if(this.state.selectedId === ''){
    return;
  }
  this.todoDatabase.child(this.state.selectedId)
  .set(null)
  this.setState({selectedId: ''})
 }

  render (){
  return (
    <SafeAreaView style={styles.container}>
      <Button title="Create" onPress={()=>this.create()}></Button>
       <Button title="Delete" onPress={()=>this.delete()}></Button>
       {
       Object.keys(this.state.todos).map( (todoId, index ) =>
        <TouchableOpacity key={index} onPress={()=>this.setState({selectedId:todoId})}>

<Text>{`${todoId}:${JSON.stringify(this.state.todos[todoId])}`}</Text>
        </TouchableOpacity>
       )

     }



      <FlatList
        data={todos}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});