Question

App.js

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TextInput,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import { Constants } from 'expo';
import Note from './components/Note';

export default class App extends React.Component {
  state = {
    noteArray: [ {date: "testdate", note: "testnote 1"} ],
    noteText: '',
  };

  addNote() {
    if (this.state.noteArray.length >= 0) {
      var d = new Date();
      this.state.noteArray.push({
        date: d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate(),
        note: this.state.noteText,
      });
      this.setState({ noteArray: this.state.noteArray });
      this.setState({ noteText: '' });
    }
    // alert(this.state.noteText);
    console.log(this.state.noteArray);

  }
  deleteNote(key) {
   return;
  }

  render() {

    let notes = this.state.noteArray.map((val, key) => {
     return (
        <Note
          key={key}
          keyval={key}
          valDate={val.date}
          valNote={val.note}

          deleteMethod={() => this.deleteNote(key)
          }
        />
      );
    });

    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerText}>NOTER</Text>
        </View>

        <ScrollView style={styles.scrollview}>

        {notes}

        </ScrollView>

        <View style={styles.footer}>
          <TouchableOpacity
            onPress={this.addNote.bind(this)}
            style={styles.addButton}>
            <Text style={styles.addButtonText}>+</Text>
          </TouchableOpacity>
          <TextInput
            style={styles.textInput}
            onChangeText={noteText => this.setState({ noteText })}
            value={this.state.noteText}
            placeholder=">> note"
            placeholderTextColor="#CD5C5C"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    alignContent: 'center',
    justifyContent: 'center',
    borderBottomWidth: 10,
    borderBottomColor: '#ddd',
    paddingTop: Constants.statusBarHeight,
    padding: 8,
    fontSize: 42,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor:"#ADFF2F"
  },
  headerText: {
    backGroundColor: '#FFC0CB',
    fontSize: 42,
    color: '#CD5C5C',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  scrollview: {
    flex: 1,
    marginBottom: 500,
    backgroundColor:"#ADDD2F",
  },
  footer: {
    position: 'absolute',
    alignItems: 'center',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor:"#ADFF2F"
  },
  addButton: {
    width: 90,
    height: 90,
    borderRadius: 50,
    borderColor: '#F08080',
    alignItems: 'center',
    justifyContents: 'center',
    elevation: 8,
    backgroundColor : "#F08080",
    marginBottom: -45,
    zIndex: 10,
  },
  addButtonText: {
    color: '#258',
    fontSize: 24,
    padding: 30,
  },
  textInput: {
    alignSelf: 'stretch',
    color: '#fff',
    padding: 20,
    paddingTop: 46,
    backgroundColor: '#252525',
    borderTopColor: '#ededed',
  },
});
`
**Note.js**

`import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { Constants } from 'expo';


export default class Note extends React.Component {
  render() {
    return (
      <View style={styles.note}>

        <Text style={styles.noteText}>{this.props.valDate}</Text>
        <Text style={styles.noteText}>{this.props.valNote}</Text>


        <TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>

        <Text style={styles.noteDeleteText}>
        D
        </Text>

        </TouchableOpacity>


      </View>
    );
  }
}

const styles = StyleSheet.create({
  note:{
    position:"relative",
    padding:20,
    paddingRight:100,
    borderBottomWidth:2,
    borderBottomColor:"#effded",

  },

  noteText:{
    paddingLeft:20,
    borderLeftWidth:10,
    borderLeftColor:"#E98B63",

  },

  noteDelete:{
    position:"absolute",
    justifyContent:"center",
    alignItems:"center",
    backgroundColor:"#9983b9",
    padding:10,
    bottom:10,
    right:10,

  },

  noteDeleteText:{
    color:"white",
  },



});

`我试图在我的本机应用程序中将自定义的“ Note”组件呈现到App.js的Scrollview中。

从日志中可以看到，“注释文本”中的数据被推送到数组中（请检查日志，您会发现），但是我的整个注释组件却没有得到根据需要呈现。

我的小吃的链接为：https://snack.expo.io/@vshiva2306/todoapp

Answer 1

您的代码中发生了很多事情，并且没有一个看起来很难样式化的图像。

您可以对样式进行一些更改以使其正常工作，因为项目正在渲染，您只是看不到它。

您缺少容器样式。将以下内容添加到您的StyleSheet中。

container: {
  flex: 1
}

在您的styles.headerText中，修复属性backGroundColor应该为backgroundColor

在您的styles.scrollview中删除marginBottom: 500

在您的styles.addButton中，修复属性justifyContents应该为justifyContent

在您的styles.footer中删除position: absolute和bottom: 0

这是包含我https://snack.expo.io/rkRhNrvX4所做的更改的小吃，这也是指向您的App.js与我的https://www.diffchecker.com/fz4n3qkN之间的区别的链接

这里是它呈现的内容

您的应用程序中还有很多可以修复的内容，但这应该可以帮助您入门。

如何在我的本机应用程序的App.js的Scrollview中呈现自定义的“ Note”组件？

1 个答案: