标题中的左右图标

时间:2017-06-10 05:33:58

标签: javascript reactjs react-native react-navigation

我想在左侧显示一个汉堡包图标(它应该显示在使用抽屉导航的所有标题上)和右侧的帖子属性按钮。我尝试使用headerRight和headerLeft,但它没有显示任何图标或按钮或其他任何东西。

这就是我所做的

const SimpleStack = StackNavigator({
  Home: {
    screen: MyHomeScreen
  },
  PostProperty: {
    screen: PostProperty
  }
});

class DrawerView extends React.Component {
  render() {
    const { navigation } = this.props;
    return (
      <View>
        <View style={{ backgroundColor: "red", padding: 100 }} />
        <View style={{ padding: 20 }}>
          <TouchableOpacity onPress={() => navigation.navigate("Rent")}>
            <Text>Rent</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => navigation.navigate("Buy")}>
            <Text>Buy</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => navigation.navigate("PostProperty")}>
            <Text>Post Property</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const DrawerStack = DrawerNavigator(
  {
    Main: {
      screen: SimpleStack
    },
    Rent: {
      screen: Rent
    },
    Buy: {
      screen: Buy
    }
  },
  {
    contentComponent: DrawerView,
    drawerWidth: 280
  }
);

export default DrawerStack;


const MyHomeScreen = ({ navigation }) => (
  <View style={styles.container}>
    <Text>Home</Text>
  </View>
);

MyHomeScreen.navigationOptions = {
  title: "RoomFinder",
  drawer: {
    icon: () => {
      <Image source={require("../../assets/menu@2x.png")} />;
    },
    headerRight: <Button title="Post Property" />
  }
};


const Rent = ({ navigation }) => (
  <View>
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={true}>
      <View>
        <Text>
          Rent Screen
        </Text>
      </View>
    </ScrollView>
  </View>
);

Rent.navigationOptions = {
  title: "Rent"
};

0 个答案:

没有答案