javascript - React Native 在组件之间添加间距

Question

我需要帮助修复我的 React native 应用中的 View 重叠(需要它们之间的间距)。

在右上角按两次加号后，两个 View 最终重叠，它们之间没有任何空间(称为 HoldWorkout 组件)

Image of overlap

我的 App.js 包含:

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

返回时 PR 包含在以下 ScrollView 中:

        <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>

App.js 中的样式是:

               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"
                  },
               });

返回时在 HoldWorkout.js 中

             <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>

View 的样式是 style.boxWorkouts，它位于 HoldWorkout.js 中，看起来像

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

我尝试将 marginBottom: 100 添加到 styles.boxWorkouts 但这是固定数量，如果我单击其中一个 HoldWorkout 组件上的“添加设置”按钮，它将添加另一行，这将增加组件的高度并最终重叠它下面的组件。

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

请帮助告诉我如何解决这个问题，因为我已经尝试解决了一段时间，因为我不确定如何在单击组件上的“添加设置”按钮时将组件向下推多于。这将确保无论在上面的 HoldWorkouts 组件上按下多少次“添加集”，它都不会重叠。

Answer 1

您需要添加空行或空 div，如下所示。

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