React Native 在组件之间添加间距

Question

I need help fixing the overlap of views in my react native app (Need spacing between them).

After pressing the plus sign twice in top right corner, the two Views end up overlapping without any space between them (Which are called HoldWorkout Components)

Image of overlap

My App.js contains:

                let PRs = PRArray.map((val, key) => {
                 return (
                     <HoldWorkout
                        key={key}
                        keyval={key}
                        val={val}
                        exName={setName}
                        setsHold={setSets}
                     />
                  );
                });

PRs is contained in the following Scroll View on Return:

        <View style={styles.container}>
            <View style={styles.whiteColor}>
                <TouchableOpacity
                    activeOpacity={0.5}
                    onPress={addPR.bind(this)}
                    style={styles.TouchableOpacity}
                >
                    <Icon name="ios-add" color="purple" size={45} />
                </TouchableOpacity>

                <View style={styles.header}>
                    <Text style={styles.headerTitle}>Personal Records</Text>
                </View>
            </View>

            <ScrollView style={styles.scrollViewStyle}>
                <View style={styles.color}>{PRs}</View>
            </ScrollView>
        </View>

The Styles in App.js is:

               const styles = StyleSheet.create({
                   whiteColor: {
                     backgroundColor: "white",
                     borderBottomColor: "#F0EFF5",
                     borderBottomWidth: 2,
                     height: 80
                  },
                  container: {
                    flex: 1,
                    borderBottomColor: "#F0EFF5",
                    borderBottomWidth: 2
                  },
                  color: {
                     marginTop: 20,
                     backgroundColor: "#F0EFF5"
                  },
               });

In HoldWorkout.js on return I have

             <View key={props.keyval} style={styles.boxWorkouts}>
                 <TextInput
                    style={styles.input2}
                    placeholder="Excercise Name"
                    placeholderTextColor="#a9a9a9"
                    onChangeText={props.exName}
                 />
                 <ExSets weight={setWeights} rep={setRep} date={setDates} />
                 {sets}
                 <View style={styles.addSet}>
                     <Button title="Add Set" color="purple" onPress={addSets}></Button>
                 </View>
             </View>

The Style for the View is style.boxWorkouts which is in HoldWorkout.js and looks like

             const styles = StyleSheet.create({
                 boxWorkouts: {
                    borderColor: "#BFBFBF",
                    borderWidth: 1,
                    backgroundColor: "white",
                    height: 90
                 }
              });

I tried adding marginBottom: 100 to styles.boxWorkouts but that is fixed amount and if I click "Add Set" button on one of the HoldWorkout Components then it will add another row which will increase the height of the component and end up overlapping the component underneath it.

Image of after clicking Add Set on first Hold Workout Component with marginBottom set to 100

Please help on telling me how to fix the spacing for this as I have been trying to figure it out for a while because I am not sure how to get the components pushed down when I click "Add Set" button on the components above. This will ensure it wont overlap no matter how many times "Add Set" is pressed on the HoldWorkouts Components Above.

Answer 1

You need to add empty row or empty div with spacing as below.

let PRs = PRArray.map((val, key) => {
                 return (
                     <div>
                        <HoldWorkout
                          key={key}
                          keyval={key}
                          val={val}
                          exName={setName}
                          setsHold={setSets}
                        />
                        <div>&nbsp; <br/> </div>
                     </div>
                  );
                });