React Native - flexDirection 问题

Question

我正在尝试在视图中放置一个按钮（由 TouchableOpacity 制作的自定义组件）和一个图像......并让它们并排放置。
请参阅下面的代码

<View
  style={{
    borderColor: 'black',
    borderWidth: 1,
    flex: 1,
    flexDirection: 'row',
  }}
>
  <MyButton
    to_extraStyle={{
      backgroundColor: '#03A9F4',
      width: 100,
      height: 60,
      alignSelf: 'flex-start',
    }}
    onPress={this._imagePickHandler}
  >
    CHOOSE PIC
  </MyButton>
  <Image
    source={{ uri: this.state.localImgUrl }}
    style={{
      width: 100,
      height: 60,
      borderColor: 'black',
      borderWidth: 1,
      alignSelf: 'flex-end',
    }}
  />
</View>

当我删除 flexDirection: 'row' 时，您可以同时看到图像和按钮....它们彼此重叠....但包含 flexDirection: 'row' 后，图像消失并且你只能看到按钮。

有什么想法吗？

Answer 1

宽度取值为%。

<View
  style={{
    borderColor: 'black',
    borderWidth: 1,
    flex: 1,
    flexDirection: 'row'
  }}
>
  <MyButton
    to_extraStyle={{
      backgroundColor: '#03A9F4',
      width: "50%",
      height: 60,
    }}
    onPress={this._imagePickHandler}
  >
    CHOOSE PIC
  </MyButton>
  <Image
    source={{ uri: this.state.localImgUrl }}
    style={{
      width: "50%",
      height: 60,
      borderColor: 'black',
      borderWidth: 1,
    }}
  />
</View>

例子

export default class App extends Component {
  render() {
    return (
      <View style={s.container}
>
 <TouchableOpacity style={s.touchable}>
      <Text style={{color:"#ffffff"}}>Button </Text>
 </TouchableOpacity>
      <Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage} />
      </View>
    );
  }
}

const s = StyleSheet.create({
  backgroundImage: {
      width: "50%",
      height: 60,
      borderColor: 'black',
      borderWidth: 1,
  },
  touchable: {      
   backgroundColor: '#03A9F4',
      width: "50%",
      height: 60,
      justifyContent:"center",
      alignItems:"center"
      },
  container: {
    borderColor: 'white',
    borderWidth: 1,
    flex: 1,
    flexDirection: 'row'
  }
});

Answer 2

删除 MyButton 和 Image 上的 alignSelf，他们将并排坐在一起。

如果您想通过 alignSelf 获得的是将 MyButton 对齐到最左边，将 Image 对齐到最右边，然后将 justifyContent: 'space-between' 添加到您的视图中。

React Native - flexDirection 问题

React Native - issue with flexDirection

react-native

react-native-android

例子