我如何根據 React Native 中一行中的按鈕數量動態調整一行中的按鈕大小

Question

我目前正在嘗試動態顯示彼此均勻間隔的不同按鈕行。 在我的代碼中，兩行每行有五個按鈕，第三行只有兩個按鈕。 由於兩個按鈕都是使用相同的組件創建的，我想知道是否有任何 CSS 可以幫助我正確地做到這一點。

目前，這是我的按鈕組件的代碼：

const NodesOptionButton = (props) => {
    const styles = StyleSheet.create({
        bold: {
            fontWeight: '800',
        },
        textWrapper: {
            width: 60,
            height: 60,
            borderWidth: 1,
            borderStyle: 'solid',
            borderColor: '#000',
            padding: 12,
            marginVertical: 8,
            backgroundColor: props.isActive ? '#000' : '#fff',
            alignItems: 'center',
            justifyContent: 'center',
            
        },
        activeTextColor: {
            color: '#fff',
        }
    });

我正在通過這段代碼渲染三行按鈕：

const NPage = (props) => {
    const styles = StyleSheet.create({
        nodeOptionsContainer: {
            flexDirection:'row',
            backgroundColor:'red',
            display: 'flex',
            justifyContent: 'space-evenly',         
        },  
    
    });

//lots of code with logic

return (
        <React.Fragment>
            <View style={styles.nodeOptionsContainer}>
                {nodeNumberOptions}
            </View>
            <View style={styles.nodeOptionsContainer}>
                {clincallyOccultOptions}
            </View>

            <View style={styles.nodeOptionsContainer}>
                {MSIOptions}
            </View>


        </React.Fragment>

        
    )

有什么建議，還是我必須為該特定按鈕創建一個新組件？ 謝謝！

Answer 1

你想讓最后兩個按鈕占據整行嗎？ 您可以隨時嘗試添加：

flex-grow: 1

到您的按鈕組件。

Answer 2

如果您希望您的按鈕始終占據整行，您只需將flex: 1添加到您的Button組件根View ，並且您不需要在父space-evenly 。

如果不是這種情況，也許您應該發布所需設計和當前設計有問題的圖片。 它有助於理解。

ps：另一個性能提示...在組件之外定義您的樣式。