Flex在React Native中未按预期工作

Question

我正试图在ReactNative中制作一个标准的数字键盘，但我无法让flex像我预期的那样工作。这是我的代码：

<View styles={styles.container}>
<View width={'100%'} styles={styles.row}>
<View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="1" /></View>
<View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="2" /></View>
<View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="3" /></View>
</View>
<View width={'100%'}  styles={styles.row}>
<View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="4" /></View>
<View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="5" /></View>
<View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="6" /></View>
</View>
<View width={'100%'}  styles={styles.row}>
<View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="7" /></View>
<View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="8" /></View>
<View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="9" /></View>
</View>
<View width={'100%'} styles={styles.row}>
<View width={100} styles={styles.buttonContainer}><Button styles={styles.button} title="0" /></View>
</View>
</View>

以下是我的风格：

const styles = StyleSheet.create({
row: {
flex: 1,
flexDirection: 'row'
},
container: {
flex: 1, 
flexDirection: 'column'
}
});

出于某种原因，这会呈现一个垂直的按钮列表。我需要更改什么才能使按钮以这种格式呈现：

1 2 3
4 5 6
7 8 9
0

Answer 1

您犯了一个小错误。它应该是style而不是styles。

<View style={styles.container}>
<View width={'100%'} style={styles.row}>
<View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="1" /></View>
<View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="2" /></View>
<View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="3" /></View>
</View>
<View width={'100%'}  style={styles.row}>
<View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="4" /></View>
<View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="5" /></View>
<View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="6" /></View>
</View>
<View width={'100%'}  style={styles.row}>
<View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="7" /></View>
<View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="8" /></View>
<View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="9" /></View>
</View>
<View width={'100%'} style={styles.row}>
<View width={100} style={styles.buttonContainer}><Button styles={styles.button} title="0" /></View>
</View>
</View>

这将是的风格

const styles = StyleSheet.create({
row: {
flex: 1,
flexDirection: 'row',

},
container: {
alignItems: 'center',
flex: 1, 
flexDirection: 'column',
},
});

Answer 2

您有一个打字错误。

<View width={'100%'} styles={styles.row}> // Wrong!
<View width={'100%'} style={styles.row}>  // change styles -> style