I have a React Native app that transposes music notes. You choose the keys to transpose from and too and then choose which notes you want to transpose.
我有一个Reaction Native应用程序,可以调换音乐音符。您选择要从和也转置的音调,然后选择要转置的音符。
The notes to choose from look like this as an example C C# D D#/Eb F F# etc. The problem is when I render the chosen notes and the new notes onscreen they are all close together and hard to read.
As an example my output right now looks like this:
D#/EbF
GA
But I want it to look like this:
D#/Eb...F (this is notetoTranspose in my code)
G............A (this is newNote)
I don't want the periods, just space between the notes to make things look more readable. Here is my code below. Any help would be appreciated.
可供选择的笔记看起来像这样,例如C、C#、D#、D#/EB、F、F#等。问题是,当我在屏幕上呈现所选笔记和新笔记时,它们都离得很近,很难阅读。举个例子,我现在的输出是这样的:D#/EBF GA,但我希望它是这样的:D#/EB...F(这是我代码中的noteoTranspose)G......A(这是Newnote)我不想要句号,只想要音符之间的空格,以使内容看起来更易读。下面是我的代码。任何帮助都将不胜感激。
import { Text, StyleSheet, View, Pressable } from 'react-native';
import { useState } from 'react';
const PickNotesToTranspose = ({ newArr, toKeyArr }) => {
const chromaticArrChoose = ['C', 'C#', 'D', 'D#/Eb', 'E', 'F', 'F#/Gb', 'G', 'G#/Ab', 'A', 'A#/Bb', 'B'];
// CHANGE
const [pressed, setPressed] = useState(() => chromaticArrChoose.reduce((acc, curr) => acc[curr] = false, {}));
const [noteToTranspose, setNoteToTranspose] = useState([]);
const [newNote, setNewNote] = useState([]);
const mapArrChoose = newArr.map((c, index) => {
const handlePress = () => {
setPressed(state => ({ ...state, [c]: !state[c] }));
setNoteToTranspose(previous => [...previous, c]);
setNewNote(prevNote => [...prevNote, toKeyArr[index]])
}
return (
<Pressable key={index} onPress={() => handlePress()}>
<Text style={[pressed[c] ? styles.selectedNote : styles.chromatic]}>{c}</Text>
</Pressable>
)
})
return (
<View>
<Text>{mapArrChoose}</Text>
<Text> {noteToTranspose}</Text>
<Text> {newNote}</Text>
</View>
)
}
}
export default PickNotesToTranspose;
const styles = StyleSheet.create({
chromatic: {
fontSize: 28,
},
btnStyle: {
borderWidth: 1,
},
chooseKeyTxt: {
marginTop: 50,
fontSize: 20,
textAlign: 'center',
},
selectedNote: {
color: 'green',
fontSize: 28,
},
output: {
borderWidth: 1,
},
})
})
更多回答
我是一名优秀的程序员,十分优秀!